vue项目中实现懒加载

Vue-lazyload插件实现懒加载

一. 插件的下载：
利用npm下载安装到项目中

npm  install  vue-lazyload  --save-dev

二.插件的注册，及属性的配置。
接下来只需要，在项目的入口文件 main.js 中进行相关的属性配置和注册即可。

import    VueLazyLoad  from 'vue-lazyload';        //项目中引入vue-lazyload插件

Vue.use(VueLazyLoad,{
	error:'data-src',                 //加载图片出错了，显示的图片
	loading:'data-src'             //加载中，显示的图片（预加载显示的图片）
	attempt：3,                        //尝试加载的图片数量
	preLoad:1.3,                      //预加载的高度比例
	listenEvents:['scroll']           //触发的事件 (监听)   
	})

上述属性为常用属性，其他属性查看官网。
上述属性值均为默认值，可以自行修改。
eg: listenEvents属性的值可以有多个：

listenEvents:['scroll'（默认）,'wheel','mousewheel','resize','animationend','transitionend','touchmove'];

三.使用：
只需要将需要进行懒加载的img标签的src属性替换成 v-lazy 即可。

<img    v-lazy='item.url'  />