一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记。
npm install vue-lazyload --save-dev
import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); 或者自定义 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 })
<img v-lazy="psdimg" class="psd" />
今天踩过的坑总结。
当遇到是v-for循环的时候,或者用div包裹着img的时候,需要在div上面添加v-lazy-container="{ selector: 'img' }"
<div v-lazy-container="{ selector: 'img' }"> <img data-src="https://domain.com/img1.jpg"> <img data-src="https://domain.com/img2.jpg"> <img data-src="https://domain.com/img3.jpg"> </div> 或者这种: <div> v-lazy-container="{ selector: 'img' }" class="contentDiv construction" v-html="content"> </div>
以及我将html里面的图片路径拿到后,转换成懒加载的时候,
一定是 data-src,而不是v-lazy,要不然在接口获取的时候,拿到了图片地址,但是会一直显示不出来的。
以上就是vue 实现图片懒加载功能的详细内容,更多关于vue 图片懒加载的资料请关注呐喊教程其它相关文章!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。