在 HTML 中延迟加载图像

在网页中加载图像是一个常见的需求，然而在页面初次加载时同时加载大量的图片会导致页面加载速度缓慢，影响用户的使用体验。为了解决这个问题，我们可以尝试使用延迟加载图像的方法，也被称为懒加载。

如何延迟加载图像

1. 使用 loading 属性

loading 属性是 HTML 5 的新特性，用于指定需要延迟加载的图像。当图像进入浏览器视口时，浏览器会自动开始加载该图像。例如：

<img src="image.jpg" alt="Image" loading="lazy">

在上述代码中，loading="lazy" 表示该图像需要延迟加载。

2. 使用 JavaScript

如果需要更精细地控制图像的延迟加载，可以通过 JavaScript 来实现。以下是一个简单的示例：

<img src="placeholder.jpg" alt="Image" data-src="image.jpg">

在上述代码中，src 属性指定了一个占位符图像，data-src 属性指定了需要加载的图像。然后，我们可以使用 JavaScript 来监测图像是否进入浏览器视口，并在满足条件时设置 src 属性以加载图像。下面是一个实现该功能的 JavaScript 代码：

const images = document.querySelectorAll('img[data-src]');

const loadImages = (image) => {
  image.setAttribute('src', image.getAttribute('data-src'));
  image.onload = () => {
    image.removeAttribute('data-src');
  };
};

const imgOptions = {
  threshold: 0,
  rootMargin: '0px 0px 200px 0px'
};

if ('IntersectionObserver' in window) {
  const imgObserver = new IntersectionObserver((entries, imgObserver) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadImages(entry.target);
        imgObserver.unobserve(entry.target);
      }
    });
  }, imgOptions);

  images.forEach(image => {
    imgObserver.observe(image);
  });
} else {
  images.forEach(image => {
    loadImages(image);
  });
}

在上面的JavaScript代码中，使用了 Intersection Observer API 监控图像是否进入浏览器视口。同时，当图像加载完毕时，移除 data-src 属性。

总结

通过延迟加载图像的方法，可以提高网页的加载速度，减少用户等待时间，在一定程度上改善用户的使用体验。可以选择根据需要使用浏览器提供的 loading 属性，或者使用 JavaScript 实现更为精细的控制。