图片懒加载的实现方法与要点揭秘

2023-09-22 20:16:27

当用户进入页面时，我们只需加载当前屏幕所显示的图片即可，等待用户滑动或滚动页面时再加载新的图片。这样一来，就可以大大提高页面的加载速度和用户体验，这也是图片懒加载的原理。

图片懒加载的实现方法主要有两种：

1. 纯 JavaScript 实现

纯 JavaScript 实现图片懒加载相对简单，只需要在 JavaScript 中添加一些代码即可。具体步骤如下：

1）首先，需要在 HTML 代码中为图片添加一个 data-src 属性，并将其值设置为图片的真实地址。例如：

<img src="placeholder.png" data-src="image.png" alt="图片">

2）然后，在 JavaScript 代码中添加以下代码：

// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');

// 遍历图片，并为其添加事件监听器
for (let i = 0; i < lazyImages.length; i++) {
  const lazyImage = lazyImages[i];

  // 当图片进入可视区域时，加载图片
  lazyImage.addEventListener('load', function() {
    lazyImage.src = lazyImage.getAttribute('data-src');
    lazyImage.removeAttribute('data-src');
  });
}

这样，当图片进入可视区域时，就会自动加载图片。

2. Intersection Observer API 实现

Intersection Observer API 是一个新的 API，专门用于实现图片懒加载。它比纯 JavaScript 实现更简单、更有效。具体步骤如下：

1）首先，需要在 HTML 代码中为图片添加一个 intersection-observer 属性，并将其值设置为一个 Intersection Observer 对象。例如：

<img src="placeholder.png" intersection-observer="observer" alt="图片">

2）然后，在 JavaScript 代码中添加以下代码：

// 创建 Intersection Observer 对象
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    // 当图片进入可视区域时，加载图片
    if (entry.isIntersecting) {
      entry.target.src = entry.target.getAttribute('data-src');
      entry.target.removeAttribute('data-src');
    }
  });
});

// 观察所有需要懒加载的图片
observer.observeAll(document.querySelectorAll('img[intersection-observer]'));