前端性能优化之图片懒加载指南📚🖼

前端

2023-11-20 04:45:01

前言

在当今快节奏的互联网时代，网站和应用程序的加载速度至关重要。用户期望快速访问信息和内容，而缓慢的加载速度可能会导致他们失去兴趣并转而访问其他网站。因此，优化网站和应用程序的性能变得尤为关键。

图片是网页中常见且重要的元素，但它们也可能是导致网页加载缓慢的罪魁祸首。尤其是当图片数量较多或尺寸较大时，加载它们可能会花费大量时间。因此，对图片进行优化以提高加载速度是至关重要的。

图片懒加载是什么？

图片懒加载（Lazy Loading）是一种延迟加载图片的优化技术。它允许浏览器仅在需要时才加载图片，从而避免在页面加载时一次性加载所有图片，从而减少页面加载时间并提高性能。

图片懒加载的工作原理很简单：它使用JavaScript在页面加载时仅加载出现在视口中的图片，而将其他图片的加载延迟到需要时再进行。当用户滚动页面时，JavaScript会检测哪些图片进入了视口，然后加载这些图片。

图片懒加载的优势

图片懒加载具有以下优势：

减少页面加载时间：图片懒加载可以减少页面加载时间，从而提高网页的整体性能和用户体验。
节省带宽：图片懒加载可以节省带宽，因为浏览器仅加载出现在视口中的图片，从而减少了带宽的使用。
提高用户体验：图片懒加载可以提高用户体验，因为用户无需等待所有图片加载完毕即可看到页面内容。

实现图片懒加载的两种方式

有两种常见的实现图片懒加载的方式：

1. 基于 Intersection Observer API 的图片懒加载

Intersection Observer API 是一个JavaScript API，它允许开发者监听元素是否与视口相交。这意味着我们可以使用 Intersection Observer API 来检测哪些图片进入了视口，然后加载这些图片。

以下是使用 Intersection Observer API 实现图片懒加载的步骤：

在 HTML 中，为要懒加载的图片添加 data-src 属性，该属性的值为图片的实际 URL。
在 JavaScript 中，创建一个 IntersectionObserver 对象，并将其绑定到要懒加载的图片上。
在 IntersectionObserver 对象的回调函数中，检查图片是否与视口相交。如果图片与视口相交，则加载图片。

以下是使用 Intersection Observer API 实现图片懒加载的示例代码：

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

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

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

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

2. 基于滚动事件的图片懒加载

除了使用 Intersection Observer API 之外，我们还可以使用滚动事件来实现图片懒加载。

以下是使用滚动事件实现图片懒加载的步骤：

在 HTML 中，为要懒加载的图片添加 data-src 属性，该属性的值为图片的实际 URL。
在 JavaScript 中，监听滚动事件。
在滚动事件的处理函数中，检查哪些图片进入了视口，然后加载这些图片。

以下是使用滚动事件实现图片懒加载的示例代码：

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

window.addEventListener('scroll', () => {
  const images = document.querySelectorAll('img[data-src]');

  images.forEach((image) => {
    if (isElementInViewport(image)) {
      image.src = image.dataset.src;
    }
  });
});

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}