一、概述

通常在一个页面中会有很多图片，而首屏出现的图片可能就是几张。我们要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。
这也就通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载---到可视区域再加载。

二、什么是懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。

用户滚动到它们之前，可视区域外的图像不会加载。

如下图所示，屏幕中能看到的img1、img2、img3、img4就会先加载显示。

而img5、img6、是在可视区域外的，就会不加载显示。只有等到用户滑动进入到可视区域时，才会被加载。

三、为什么要用懒加载

• 提升用户的体验
  例如用户打开手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，，这就严重影响用户体验。而且更多时候其实用户都不会把整个网页都看完，所以没必要一次性将所有图片都加载完成。
• 防止网站正常使用
  只可以有效防止在并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

四、懒加载原理

首先将页面上的图片的src属性设为空字符串，而图片的真实路径则设置在data-original属性中。

当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域。

如果图片进入可视区内将图片的src属性设置为data-original的值，这样就可以达到延迟加载的效果。

五、图片懒加载使用

在这里已经有给我们封装好的Lazyload 图片懒加载，只需要添加对应的配置即可。
在这使用时，基本很多页面都会涉及到懒加载问题，所以可以直接将这个配置到man.js中。

• 配置Lazyload

  // main.js文件中
  
  import { Lazyload } from 'vant';
  Vue.use(Lazyload);

• 将v-lazy指令的值设置为你需要懒加载的图片

  // 例如在轮播图中，将图片属性绑定在v-lazy中即可
  
  <van-swipe :autoplay="3000" indicator-color="white" class='banner-view'>
          <van-swipe-item v-for='(item,index) in banner' :key="index">
              <img v-lazy='item.img'>
          </van-swipe-item>
      </van-swipe>