图片资源懒加载

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

安装插件

bash

npm install vue-lazyload --save-dev

npm install vue-lazyload --save-dev

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

import VueLazyload from 'vue-lazyload'

import VueLazyload from 'vue-lazyload'

然后再 vue 中直接使用

Vue.use(VueLazyload)

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {  preLoad: 1.3,  error: 'dist/error.png',  loading: 'dist/loading.gif',  attempt: 1  })

Vue.use(VueLazyload, {  preLoad: 1.3,  error: 'dist/error.png',  loading: 'dist/loading.gif',  attempt: 1  })

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

vue

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

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

图片资源懒加载 ​