vue 实现图片懒加载功能 |
您所在的位置:网站首页 › 历史建筑保护图则 › vue 实现图片懒加载功能 |
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记。 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,要不然在接口获取的时候,拿到了图片地址,但是会一直显示不出来的。 以上就是vue 实现图片懒加载功能的详细内容,更多关于vue 图片懒加载的资料请关注脚本之家其它相关文章! 您可能感兴趣的文章:vue实现图片懒加载的方法分析vue项目中图片懒加载时出现的问题及解决vue里面如何使用图片的懒加载vue项目实现图片懒加载的简单步骤vue图片懒加载代码实现 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |