图片懒加载：优化性能，提升用户体验

2023-12-17 23:31:29

图片懒加载的概念

图片懒加载是一种技术，它可以推迟加载非关键图片，直到用户滚动到它们为止。这样可以减少页面加载时间，并提高页面性能。图片懒加载的原理很简单：它首先会在页面中放置一个占位符图片，当用户滚动到图片时，它才会加载真正的图片。

使用Promise实现图片懒加载

使用Promise来实现图片懒加载非常简单。首先，我们需要创建一个Promise对象，并将其状态设置为“pending”。然后，我们需要在图片加载完成后将Promise的状态设置为“fulfilled”，或者在图片加载失败时将Promise的状态设置为“rejected”。

function lazyLoadImage(image) {
  return new Promise((resolve, reject) => {
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('Failed to load image'));
  });
}

接下来，我们需要在滚动事件中检查图片是否可见。如果图片可见，那么我们就需要加载图片。

window.addEventListener('scroll', () => {
  const images = document.querySelectorAll('img[data-src]');
  for (let i = 0; i < images.length; i++) {
    const image = images[i];
    if (isInViewport(image)) {
      lazyLoadImage(image).then(() => {
        image.classList.remove('lazyload');
      });
    }
  }
});