利用 Intersection Observer API 实现懒加载-CFANZ编程社区

开发中，懒加载（Lazy Loading）可以提高页面性能和用户体验。通过懒加载，我们可以推迟加载页面中的某些资源，比如图片、视频或者其他媒体，直到用户需要访问它们时才进行加载。这篇文章将介绍如何利用 Intersection Observer API 实现懒加载效果。

Intersection Observer API

Intersection Observer API 是浏览器提供的一种异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的方法。它可以用来监听元素与视窗的交叉，并在特定条件下触发回调函数。

实现懒加载的步骤

步骤 1：准备工作

首先，在 HTML 中添加需要懒加载的资源，比如图片。

<img data-src="placeholder.jpg" class="lazy-load" alt="Lazy Loaded Image">

在这里，我们给图片添加了一个 data-src 属性，用来存放图片的真实 URL，同时给图片添加了一个 lazy-load 类名，用来标识这是需要懒加载的图片。

步骤 2：编写 JavaScript 代码

接下来，我们使用 JavaScript 编写懒加载的逻辑。首先，我们需要创建一个 Intersection Observer 对象，并定义观察的目标元素和触发时的回调函数。

const lazyLoadImages = document.querySelectorAll('.lazy-load');

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
};

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      observer.unobserve(img);
    }
  });
}, options);

lazyLoadImages.forEach(image => {
  intersectionObserver.observe(image);
});

在这段代码中，我们首先通过 querySelectorAll 方法获取所有具有 lazy-load 类名的图片元素，然后创建了一个 Intersection Observer 对象，并定义了触发时的回调函数。在回调函数中，我们检查目标元素是否与视窗交叉，如果是，则将 data-src 属性的值赋给 src 属性，从而实现图片的懒加载。最后，我们通过 observe 方法观察每个目标元素。

步骤 3：添加样式（可选）

为了更好地展示懒加载效果，你可以根据需要添加一些样式来优化页面布局和交互效果。

.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-load.loaded {
  opacity: 1;
}