学习记录04：vue-lazyload图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以许多时候我们需要将页面内未出目前可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

（1）安装插件

npm install vue-lazyload –save-dev

（2）在入口文件 man.js 中引入并使用

import VueLazyload from vue-lazyload

然后再 vue 中直接使用

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {

preLoad: 1.3,

error: dist/error.png ,

loading: dist/loading.gif ,

attempt: 1

})

（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

<img v-lazy=”/static/img/1.png”>