vue3 图片懒加载,vue 页面懒加载

　　本文主要介绍vue的懒人图片加载功能的方法，帮助大家更好的理解和使用vue。感兴趣的朋友可以了解一下。

　　当一个页面上有很多图片的时候，就需要在界面上懒加载图片。今天遇到他们了，记下懒装。

1，需要安装vue的懒加载插件。

　　npm安装vue-lazyload -保存-开发

2，需要在main.js里面进行引用。

　　从“vue-lazyload”导入VueLazyload

　　vue . use(VueLazyload)；

　　或者定制。

　　Vue.use(VueLazyload，{

　　预载荷：1.3，

　　错误： dist/error.png ，

　　正在加载： dist/loading.gif ，

　　尝试：1

　　})

3,修改图片的路径，设置为懒加载的形式，将src改成v-lazy

　　img v-lazy=psdimg class=psd /

　　今天踩的坑总结。

　　当遇到v-for循环或用div包装img时，需要将V-lazy-container= { selector: IMG } 添加到div中。

　　divv-lazy-container= { selector: img }

　　img data-src=//domain . com/img 1 . jpg

　　img data-src=//domain . com/img 2 . jpg

　　img data-src=//domain . com/img 3 . jpg

　　/div

　　或者这个：

　　差异

　　v-lazy-container= { selector: img }

　　class= contentDivconstruction

　　v-html=内容

　　/div

　　当我获得html格式的图片路径并将其转换为延迟加载时，

　　必须是data-src，而不是v-lazy。否则，在获取接口时，会获得图像地址，但永远不会显示。

　　这就是vue的懒加载功能的细节。更多关于vue懒加载的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。