JS实现图片懒加载(lazyload)

原理

对于标签，在初次加载时，不把URI放在src属性中，而是自定义一个属性，比如data-src，然后仅当图片滚入视窗，被用户看到时，它才会真正加载。下图详解了如何判断何时加载图片。

判断何时加载图片

1. 浏览器可视区域高度H，通常是固定的(这里不考虑手动调整窗口大小)window.innerHeight可取得此值。
2. 图片距离页面顶端的距离T，也是固定值可用offsetTop(或getBoundingClientRect().top)方法计算。
3. 浏览器滚动条滚过高度S，这是唯一变化的值document.documentElement.scrollTop||document.body.scrollTop
   计算。

当 H + S > T 时该图片出现在可视区域。

实现

参考

offsetTop,offsetParent
原生JS延时加载
每天努力一点点
谢谢你看完

---