vue图片懒加载lazyload，依赖vue2.0以上版本。

vue图片懒加载，依赖vue2.0以上版本。图片或者其他资源进入可视区域后加载。

Latest	Latest	Latest	Latest	Latest	11+

例子就是/demo目录下的文件

使用npm在本地安装：

npm install vue-viewload --save-dev 使用vue-viewload

js文件中

//需要引入vue，以及vue-viewload，下面的axios是ajax库，如果不需要可以不引用 import Vue from 'vue' import VueViewload from 'vue-viewload' import axios from 'axios' //使用VueViewload Vue.use(VueViewload) new Vue({ el: '#app', data: { pic: 'http://pics.sc.chinaz.com/files/pic/pic9/201701/bpic232.jpg', list: [ 'http://pics.sc.chinaz.com/files/pic/pic9/201702/zzpic1399.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201612/fpic9875.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201610/fpic8220.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201611/fpic8607.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201611/fpic8745.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201701/zzpic437.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201610/apic23881.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201608/fpic5949.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201608/fpic6419.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201609/fpic7403.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201609/fpic7317.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201605/fpic1376.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201606/apic21195.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201606/apic21465.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201604/apic20040.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201604/fpic914.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201604/fpic873.jpg', 'http://pics.sc.chinaz.com/files/pic/pic9/201605/fpic1208.jpg' ] }, methods: { //函数需要返回一个函数 getAjaxContent: function() { return function() { axios({ method: 'get', url: '../api/data.txt' }).then((response) => { this.innerHTML = response.data; }) } } } })

html文件中，在要进行懒加载的元素上添加vue指令v-view，值为加载资源的URL或methods方法。需要懒加载的元素请尽量设置宽高样式

<div id="app"> #给img元素的src赋值，设置图片未加载时显示的图片，可以图片设置为一个loading.gif动态加载图<br/> <img src="http://img.zcool.cn/community/0161f656b0663e6ac7256cb052d31a.gif" v-view="pic"><br/> #v-view的值不是变量的，值为单引号引起来的资源url地址<br/> <img v-view="'http://pics.sc.chinaz.com/files/pic/pic9/201701/bpic232.jpg'" style="height:200px;"><br/> #v-view的值是变量，pic值为资源url地址<br/> <img v-view="pic" style="height:200px;"><br/> #v-view的值是变量，变量值通过遍历list数组得来<br/> <img v-view="item" v-for="item in list" style="height:200px;display:block;"><br/> #v-view的值是methods方法，一般用在非img元素<br/> <div v-view="getAjaxContent()">加载中...</div> </div> 设置懒加载选项

//options对象是可选的，用来设置懒加载选项 Vue.use(VueViewload, options)

options对象

比如，设置默认loading.gif图，加载失败图，提前200px加载图片，图片淡入显示，图片进入可视区域执行回调函数:

Vue.use(VueViewload, { defaultPic: 'http://img.zcool.cn/community/0161f656b0663e6ac7256cb052d31a.gif', errorPic: 'http://a0.att.hudong.com/77/31/20300542906611142174319458811.jpg', threshold: -200, effectFadeIn: true, callback: function(ele, src) { ele.style.border = '1px solid red'; console.log(ele.nodeName + '...' + src); } })