一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记。
(如果使用的是vant框架,同样需要安装这个插件,我一直没安装,按照官方文档来写的时候,就是加载不出来,安装了懒加载插件后就可以了,可以在f12中的network看到,滑到那个位置才请求的图片)
1,需要安装vue的懒加载插件。
npm install vue-lazyload --save-dev
2,需要在main.js里面进行引用。
复制代码
import VueLazyload from “vue-lazyload”;
Vue.use(VueLazyload);
或者自定义
Vue.use(VueLazyload, {
preLoad: 1.3,
error: ‘dist/error.png’,
loading: ‘dist/loading.gif’,
attempt: 1
})
复制代码
3,修改图片的路径,设置为懒加载的形式,将src改成v-lazy
今天踩过的坑总结。
当遇到是v-for循环的时候,或者用div包裹着img的时候,需要在div上面添加v-lazy-container="{ selector: 'img' }"
复制代码
或者这种:
v-lazy-container="{ selector: 'img' }" class="contentDiv construction" v-html="content">
复制代码
以及我将html里面的图片路径拿到后,转换成懒加载的时候,
一定是 data-src,而不是v-lazy,要不然在接口获取的时候,拿到了图片地址,但是会一直显示不出来的。