图片懒加载的原理

图片懒加载是什么

类似于大型的淘宝京东等网页，有大量的商品图片信息，如果我们使页面包含的所有图片一次性加载完成，加载速度回非常慢那用户体验很差。
目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示，通常配合骨架屏来使用。
这样做的好处，一是页面加载速度快，而是节省流量，因为很少有用户会把页面从上到下滚动完。

图片懒加载的原理

先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可视窗口时，再将实际地址应用。
方法1
传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
获取可视窗口的大小，判断交叉面积
如果图片出现在视口就显示，赋值src
方法2
新的 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。
IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。
IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性。

    time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
    target：被观察的目标元素，是一个 DOM 节点对象
    rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
    boundingClientRect：目标元素的矩形区域的信息
    intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
    intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
1
2
3
4
5
6

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。