懒加载原理以及实现思路

懒加载的优点

提高前端性能，按需加载图片减轻服务器负担，提高页面加载速度。

懒加载的原理

图片的加载是依赖于src路径，我们可以设置一个暂存器，把图片路劲放到暂存器中，当我们需要这个图片加载显示时，再把路径赋值给src，这样就能实现按需加载，也就是懒加载。我们通常使用html5中的data-属性作为暂存器，例如src的值默认是正在加载中的GIF，而真正的图片路径是保存在data-中。

懒加载思路及实现

实现懒加载有四个步骤，如下：
1.加载loading图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替换真图片

实现懒加载的四种方式

1. 滚动距离计算

offsetTop,scrollTop,clientHeight原生API获取距离像素计算

offsetTop:获取当前元素与其父级元素顶部内边距的距离

scrollTop:当前元素滚动超出的高度

clientHeight:当前元素的可视高度

2. getBoundingClientReat方法计算

3. IntersectionObserver监听

3. IntersectionObserver监听