剖析图片懒加载：三种实现及两种优化

概要

图片懒加载是一种优化图像加载的技术，它仅在需要时加载图像，从而提升网页性能和用户体验。本文将深入探讨图片懒加载的实现方法和优化技巧，帮助开发者更有效地实施此技术。

实现方法

1. 整体位置比较

此方法使用滚动事件来检测图像是否进入可视区域。当图像进入可视区域时，它将触发图像加载。

window.addEventListener("scroll", function() {
  let images = document.querySelectorAll("img");
  for (let i = 0; i < images.length; i++) {
    let image = images[i];
    if (isElementInViewport(image)) {
      image.src = image.dataset.src;
    }
  }
});

2. 视图位置

此方法使用 IntersectionObserver API 来检测图像是否进入可视区域。与整体位置比较相比，它提供了更高的性能。

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

let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++) {
  let image = images[i];
  observer.observe(image);
}

3. observe

此方法使用 observe 属性直接监听图像的可见性变化。它是 IntersectionObserver API 的一种更简洁的语法。

document.querySelectorAll("img").forEach((image) => {
  image.observe((entries, observer) => {
    if (entries[0].isIntersecting) {
      image.src = image.dataset.src;
      image.unobserve(observer);
    }
  });
});

优化技巧

1. 节流

当滚动事件频繁触发时，连续的图像加载可能会降低性能。通过使用节流技术，可以限制滚动事件的触发频率。

function throttle(func, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func();
        timeout = null;
      }, wait);
    }
  };
}

window.addEventListener("scroll", throttle(function() {
  // 懒加载逻辑
}, 250));

2. 代码优化

尽可能减少图像加载函数中不必要的代码，以提高性能。例如，避免在每个滚动事件中查询所有图像。

// 已优化代码
let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++) {
  if (isElementInViewport(images[i])) {
    loadImage(images[i]);
  }
}

// 未优化代码
window.addEventListener("scroll", function() {
  let images = document.querySelectorAll("img");
  for (let i = 0; i < images.length; i++) {
    if (isElementInViewport(images[i])) {
      loadImage(images[i]);
    }
  }
});

结论

图片懒加载是一种强大的技术，它可以显著提升网页性能和用户体验。通过理解实现方法和优化技巧，开发者可以有效地实施此技术，打造更加流畅和响应迅速的网页。