vue 实现图片懒加载功能
更新时间：2020年12月31日 11:59:18 作者：熊大的小跟班
这篇文章主要介绍了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
<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 图片懒加载的资料请关注脚本之家其它相关文章！
相关文章
今天小编就为大家分享一篇使用Vue.set()方法实现响应式修改数组数据步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue3的基本使用方法,结合实例形式详细分析了vue3功能、组件、生命周期、TypeScript结合运用等相关概念与使用方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了 vue利用openlayers加载天地图和高德地图，下文章主要由两部分完成openlayers加载天地图和加载高德地图，下面来看看详细内容吧,需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要为大家详细介绍了vue实现移动端原生小球滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
vue中v-for和v-if不能在同一个标签使用的最新解决方案
这篇文章主要介绍了vue中v-for和v-if不能在同一个标签的最新解决方案,这里描述了两种解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场,这篇文章主要给大家介绍了关于Vue中插槽Slot基本使用与具名插槽的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue 原生实现右键菜单组件功能，本文给大家扩展知识点vue点击菜单以外区域，隐藏菜单操作，通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue3一个元素如何绑定两个或多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理，需要的朋友可以参考下2018-04-04
最新评论