IntersectionObserver 惰性加载

IntersectionObserver 是一个浏览器 API，用于监测元素是否进入或者离开视窗的可见区域。惰性加载（Lazy Loading）是一种优化技术，可以延迟加载页面中的图片、视频或其他资源，直到用户滚动到它们所在的位置。

使用 IntersectionObserver 和惰性加载可以提升网页的加载性能和用户体验。当页面有大量图片或其他资源需要加载时，使用惰性加载可以减少初始加载时间，并且避免不必要的网络请求。

惰性加载的实现步骤如下：
1. 创建 IntersectionObserver 对象，指定回调函数和观察的选项。
2. 将需要惰性加载的元素添加到观察列表中，通过调用 IntersectionObserver 的 observe() 方法。
3. 在回调函数中，通过判断传入的 entries 数组中每个元素的 isIntersecting 属性来确定元素是否进入了可见区域。
4. 如果元素进入了可见区域，执行加载资源的操作，例如将图片的 src 属性设置为对应的图片链接。

通过这种方式，只有当用户滚动到可见区域时，相关资源才会被加载，从而减少了初始加载时间和网络带宽消耗。这对于提高网页性能、降低流量消耗以及优化用户体验都是非常有益的。