vue项目中实现懒加载的方法

当我们开始做一个项目时，不乏有些页面图片比较多，为了加速页面的加载速度，减轻浏览器的负担，所有很多时候我们需要将页面内未出现在可视区域内的图片先不加载，等到该图片滚动到可视区域后再去加载。这样子对于页面加载性能会有很大的提升，也提高了用户体验

实现方法：使用vue中的vue-lazyload插件

步骤：

1. 安装插件

npm install vue-lazy-load -S

2. 在项目的入口文件main.js中引入并使用

main.js文件

import Vue from 'vue'

import App from './App.vue'

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

---

// 或者添加自定义选项

Vue.use(VueLazyload, {

  preLoad: 1.3,

  error: 'dist/error.png', // 图片路径错误时加载的图片

  loading: 'dist/loading.gif',  // 预加载图片

  attempt: 1 //尝试加载图片的数量

})

---

3. 修改图片的加载方式为懒加载就行了（将我们通过指令绑定的图片：src属性直接改为v-lazy就可以了）

     

     

vue-lazyload参数选项说明

到这里图片懒加载的简单效果已经实现了，然后就可以按着开发文档的api进行扩展或者通过访问 https://www.npmjs.com/package/vue-lazyload网址具体了解vue-lazyload的使用。（如有不足或者错误，欢迎大家指出 --- 逆战）