图片懒加载：两种实现方式深入浅出对比

图片懒加载概述

图片懒加载是一种前端性能优化技术，其核心思想是控制视口外的图片进入视口时候再进行加载，从而提升页面初始化渲染性能和用户体验。

传统方式：监听滚动事件

传统方式是通过监听页面滚动事件来判断图片是否进入视口。当页面滚动时，会触发滚动事件，然后可以通过判断图片元素与视口的相对位置来确定图片是否进入视口。如果图片进入视口，则加载图片；否则，不加载图片。

Intersection Observer：利用新的API

Intersection Observer是W3C定义的新API，它允许您观察一个元素相对于其祖先元素或视口的可见性。这意味着您可以使用Intersection Observer来确定图片是否进入视口，而无需监听页面滚动事件。

传统方式和Intersection Observer的对比

特征	传统方式	Intersection Observer
原理	通过监听页面滚动事件来判断图片是否进入视口	利用新的API来观察一个元素相对于其祖先元素或视口的可见性
优缺点	需要监听页面滚动事件，可能会导致性能问题	不需要监听页面滚动事件，性能更好
适用场景	页面中图片较少，或者图片加载速度较快时	页面中图片较多，或者图片加载速度较慢时

总结

传统方式和Intersection Observer都是图片懒加载的有效实现方式，但Intersection Observer的性能更好，适用于页面中图片较多，或者图片加载速度较慢的情况。

如何使用Intersection Observer实现图片懒加载

以下是如何使用Intersection Observer实现图片懒加载的示例代码：

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
});

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

这段代码首先创建了一个Intersection Observer实例，并为其指定了一个回调函数。回调函数会在被观察元素进入或离开视口时触发。当被观察元素进入视口时，回调函数会将该元素的src属性设置为其data-src属性的值，并停止观察该元素。

然后，代码找到页面中的所有img元素，并为每个元素创建一个Intersection Observer实例。这将确保页面中的所有图片都能够被懒加载。

示例代码讲解

• new IntersectionObserver：创建一个Intersection Observer实例。
• entries：一个包含被观察元素的数组。
• observer：Intersection Observer实例。
• entry.isIntersecting：一个布尔值，指示被观察元素是否进入视口。
• image.src：被观察元素的src属性。
• image.dataset.src：被观察元素的data-src属性。
• observer.unobserve(image)：停止观察被观察元素。

结语

本文深入浅出地对比了图片懒加载的两种实现方式：传统方式和Intersection Observer。传统方式通过监听页面滚动事件来判断图片是否进入视口，而Intersection Observer则是一种新的API，可以更有效地观察元素的可见性。本文从原理、优缺点、适用场景等方面进行了对比，帮助您选择最适合您项目的图片懒加载实现方式。