vue项目实现图片懒加载

vue项目实现图片懒加载

当用户打开一个页面时，页面会一次性加载所有的图片，这时则可能会影响整个页面的性能，针对这个问题我们可以使用vue-lazyload插件对图片进行懒加载，当图片需要显示时在进行加载

1.第一步安装vue-lazyload插件

npm install vue-lazyload --save

2.第二步在main.js文件下导入和使用插件：

import VueLazyload from 'vue-lazyload'

3.使用插件

Vue.use(VueLazyload)	//基本用法

也可以在使用插件是传入一个对象

Vue.use(VueLazyload,{
  loading:require("img.src")	
})

（可以在loading属性中传入一张图片，在页面加载图片的过程中进行顶替）

4.将img标签的src属性改成v-lazy，如下：

<img v-lazy="img.src"/>