图片懒加载：提高网站性能的四种方法

2024-03-06 01:57:28

当网站访问者首次访问页面时，页面上的所有图像都会加载，无论它们是否可见。这可能会减慢页面的加载速度，尤其是在图像较多或文件较大时。图片懒加载是一种技术，可以延迟加载图像，直到它们出现在视口中。这可以显著提高页面加载速度和用户体验。

本文将介绍四种实现图片懒加载的方法：

1. Intersection Observer API

Intersection Observer API 是一种现代的 JavaScript API，它允许开发者监视元素何时进入或离开视口。这使得它成为实现图片懒加载的理想选择。

如何使用：

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

document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

2. JavaScript 手动实现

如果您不能使用 Intersection Observer API，可以使用手动实现的 JavaScript 来实现图片懒加载。

如何使用：

window.addEventListener('scroll', () => {
  document.querySelectorAll('img[data-src]').forEach((img) => {
    if (img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
    }
  });
});

3. CSS 背景图片

对于背景图片，可以使用 CSS 属性 background-image 和 background-position 来实现图片懒加载。

如何使用：

.lazy-background {
  background-image: url('');
  background-position: center;
}

.lazy-background.is-loaded {
  background-image: url(path/to/image.jpg);
}