图片懒加载：一文搞懂实现方案，提升页面性能！

前端

2023-10-17 00:55:30

优化网站性能：图片懒加载的实现方案指南

在互联网飞速发展的时代，网站的加载速度对用户体验至关重要。作为网页中不可或缺的元素，图片往往成为拖慢页面加载速度的罪魁祸首。为了解决这一问题，图片懒加载应运而生。

什么是图片懒加载？

图片懒加载是一种优化技术，它延迟加载图片，直到它们进入用户的视口。通过这种方式，可以避免不必要的下载和渲染，从而加快页面的加载速度。

图片懒加载的实现方案

实现图片懒加载有多种方法，以下是一些常见的方案：

1. 瀑布流

瀑布流是一种经典的图片懒加载技术，它使用 JavaScript 动态调整图片的 src 属性。当图片进入视口时，JavaScript 代码将 src 属性设置为图片的实际地址，从而触发图片加载。

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

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

const observer = new IntersectionObserver(loadImages, {
  root: null,
  rootMargin: '0px',
  threshold: 0
});

images.forEach(image => {
  observer.observe(image);
});

2. Intersection Observer

Intersection Observer 是一个原生 JavaScript API，用于观察元素是否与视口相交。你可以使用它来监听图片元素是否进入视口，从而触发图片加载。

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

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

const observer = new IntersectionObserver(loadImages, {
  root: null,
  rootMargin: '0px',
  threshold: 0
});

images.forEach(image => {
  observer.observe(image);
});

3. 图片占位符

图片占位符是一种占位图片，它在图片加载完成之前显示在图片容器中。占位符可以是纯色背景、加载动画或缩略图。当图片加载完成时，占位符会被替换为实际的图片。

<div class="image-container">
  <img src="placeholder.png" data-src="actual-image.jpg" alt="Image">
</div>

4. onload 事件

onload 事件会在图片加载完成时触发。你可以使用它来延迟加载图片。

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

images.forEach(image => {
  image.onload = () => {
    image.classList.remove('loading');
  };

  image.src = image.dataset.src;
});