H5页面如何实现图片懒加载？

图片懒加载，往往作为减少首页白屏时间的一个解决方案而出现。直观的来说，就是不要直接加载所有图片，而是满足一定条件后才加载，也就是”惰性加载“。实现图片懒加载的方式有很多，如果要简单点那就直接使用第三方插件：vue-lazyload，如果想探究一下别人的插件是怎么实现图片懒加载的，那么可以看看本文是如何实现的。

实现思路

实现图片懒加载我们需要先明白具体的场景，一般来说，我们会在首屏先加载几张图片，其他的图片则先不加载，在页面滚动时，图片快出现在视窗中的时候才来加载图片。为什么要这么实现呢，因为对于图片很多的场景，如果一次性加载出所有的图片，可能会导致页面白屏时间比较长，特别是图片比较大的时候。

实现过程：

1.使用data-*自定义数据属性给img标签新增一个data-src属性
2.全局监听滚动事件，使用节流处理回调函数
3.在回调函数中，判断图片是否已经出现在可视区域，如果已经出现在可视区域，则加载该图片
4.页面初始化的时候执行一下回调函数，保证首屏有图片显示

在这个实现过程中，涉及一些知识点，我们来快速回顾一下：

准备知识