背景
在本次项目中 由于是一个相册展示的项目，相片数据通过月份进行分页，前端通过接口一次返回所有相片的链接，接口上并没有返回相片总数，嗯...加上有点懒 也就没做滚动加载了 然后发现了 vue-lazyload这个插件
本文只是简单记录一下插件用法 和有这个插件的存在 并不是什么高端文章哦~
官方简单事例子
// index.js
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
// App.vue
<div
v-for="item in list">
<img
v-if="item.url"
v-lazy="item.url">
</div>
通过这个简单例子就可以实现lazyload
看看请求
可以看出滚动后才开始加载后面的图片
看看dom结构可以看出 通过 监听页面展示区域 动态把把v-lazy里面的替换为data-src 替换为src 实现懒加载
嗯 这就很好的解决了 在不用再次分页的情况下请求大量图片请求的问题了
网友评论