vue 图片懒加载如何实现

什么是懒加载？
懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延 迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可 视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。
为什么要懒加载？
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。
总结出来就两个点：
**1.**全部加载的话会影响用户体验
**2.**浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

懒加载的实现原理？

由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。 大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏 览器是否发起亲求就是根据是否有src属性决定的。 既然这样，那么我们就要对标签的src属性下手了，在没进入可视区域 的时候，我们先不给这个标签赋src属性，这样岂不是浏

览器就不会发送 请求了。

我这里基于vue来实现懒加载
首先安装下插件：

npm install vue-lazyload --save

在 main.js 中使用:

引入

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad,{
    error:'/img.jpg',                    //报错时需要的图片
    loading:'/img/jpg'				     //加载时需要的图片
})
 

图片替换：

 vue文件中将需要懒加载的图片绑定 v-bind:src 换成 v-lazy 

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