这期内容当中小编将会给大家带来有关怎么在vue项目中实现一个图片懒加载功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
1,需要安装vue的懒加载插件。
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="//domain.com/img1.jpg"> <img data-src="//domain.com/img2.jpg"> <img data-src="//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项目中实现一个图片懒加载功能-创新互联
网站链接:https://www.cdcxhl.com/article24/dpohje.html
成都网站建设公司_创新互联,为您提供定制开发、网站内链、网站营销、动态网站、云服务器、网站维护
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联