IntersectionObserver 实现图片懒加载

图片懒加载原理：

先将img标签的src设置为同一张图片，减少http的请求数量，给img标签自定义属性，把真正的路径放在自定义属性中（比如data-src），当监听到img出现在可视窗口时候，将src替换成真正的路径。

图片懒加载能解决什么问题：

做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等，从而达到性能优化的目的。

下面介绍两种实现图片懒加载的方式：

一、通过监听页面的scroll事件

以上方法实现了一个简易的图片懒加载demo，但是这种方法存在缺点，由于scroll事件密集发生，计算量很大，容易造成性能问题。

二、IntersectionObserver"交叉观察器"

为了解决上面的问题，目前有一个新的 IntersectionObserver API，可以自动"观察"元素是否可见，可见的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。以下是IntersectionObserver 兼容性

具体的API可以参考官方API文档，下面是一个具体的demo

由于IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。并且IntersectionObserver的实现，采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行，所以不会影响延迟关键事件。

总结：

• 通过监听scroll事件实现懒加载的方式由于scroll事件密集发生，计算量很大，容易造成性能问题，所以还需要写个节流或防抖函数限制触发频率，来优化性能
• 利用IntersectionObserver API来实现懒加载性能更好，但也要考虑浏览器是否兼容