如何实现图片懒加载？

[suukii]

方案一：clientHeight + scrollTop + offsetTop

先给图片一个占位资源，然后通过监听 scroll 事件来判断图片是否到达视口，再给图片设置真实的 src 属性。最好对 scroll 事件做节流处理，以免频繁触发。

方案二：getBoundingClientRect

在方案一的基础上换了一种方式来判断图片是否到达视口，使用 imgEle.getBoundingClientRect.top() < clientHeight 来判断。

方案三：IntersectionObserver

这个浏览器 API 实现了监听window的scroll事件、判断观察对象是否在视口中 以及 节流 三大功能。