vue中如何给图片设置懒加载用Vue实现图片懒加载

懒加载：首先将图片的src链接设为同一张图，并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

顾名思义，简单理解就是
当页面打开，首先所有数据引进来的图片先不显示，所有图先加载自己指定的某一张图片，一般动态图片效果更好，然后真正路径图片一个一个显示到页面，从而达到懒加载效果。

优点：懒加载能防止页面一次性向服务器响应大量请求导致服务器响应慢，防止页面卡顿或崩溃等问题。

首先，我们需要下载下安装下懒加载的插件(模块化)
npm install vue-lazyload -s
安装完，如下图

接着，我们需要模块化式引入 vue-lazyload.js
import lazyload from "vue-lazyload"
下面，我们在VUE中引入一张图片，单引号里面的就是到时候懒加载时候显示的图片，具体路径大家自己找对自己的路径
Vue.use( lazyload,{ loading:'../static/images/ttp.gif'} )
下一步我们找到需要实现懒加载的图片位置代码，如：
<img :src="listB[0].Pic"/>
我们将 :src 改为 v-lazy即可，改完如下：
<img v-lazy="listB[0].Pic"/>
这样我们的懒加载就实现了，如需补充，请下方留言

详细介绍 http://www.sharedblog.cn/?post=21 <http://www.sharedblog.cn/?post=21>

热门工具换一换

vue中 如何给图片设置懒加载 用Vue实现图片懒加载