图片懒加载的革新：IntersectionObserver带来的福音

前端

2023-01-04 21:39:32

揭秘IntersectionObserver：让图片懒加载不再麻烦

想象一下，你在浏览一个网站，它的图片在屏幕上以迅雷不及掩耳之势加载，没有丝毫延迟或闪烁。这就是IntersectionObserver API的魔力所在，它可以智能地加载图片，只在你需要看到它们时才出现。

图片懒加载：为何如此重要？

传统的图片加载方式存在一些问题：

延迟加载： 图片直到滚动到视图中才会加载，这可能会导致难看的空白区域。
性能问题： 页面上的图片越多，滚动性能就会越差。
难以控制： 你无法控制何时加载图片，导致加载时间不一致。

IntersectionObserver：懒加载的救星

IntersectionObserver解决了这些问题，它通过在元素进入或离开视口时触发回调函数来工作。这样，你可以：

即时加载： 元素一进入视口，图片就会立即加载，消除了延迟。
高性能： IntersectionObserver只在元素进入或离开视口时触发回调，最大限度地减少了对性能的影响。
精确控制： 你可以设置自定义阈值，精确控制何时加载图片。

构建图片懒加载组件

要利用IntersectionObserver构建一个懒加载组件，只需以下步骤：

创建观察器： 创建一个新的IntersectionObserver实例，并为其提供一个回调函数，该回调函数在元素进入视口时触发。
监听元素： 使用querySelectorAll()选择所有要懒加载的图片元素，然后使用observe()方法将它们添加到观察器中。
加载图片： 在回调函数中，使用loadImage()函数加载图片，该函数从图片元素的data-src属性获取图像源。

示例代码

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadImage(entry.target);
    }
  });
});

const images = document.querySelectorAll('img');
images.forEach((image) => {
  observer.observe(image);
});

function loadImage(image) {
  image.src = image.dataset.src;
}