解放你的网页：图片懒加载指南

2023-12-31 20:37:54

写在前面

在当今网络飞速发展的时代，网页加载速度成为衡量用户体验的重要指标。图片作为网页中不可或缺的元素，其加载时间直接影响页面整体的加载速度。对于一张动辄几兆字节的图片来说，一味的全部加载显然是不明智的。图片懒加载技术应运而生，它可以智能地根据用户滚动浏览页面时的需求，只加载当前可视区域内的图片，从而显著提升网页加载速度。

图片懒加载原理

图片懒加载的原理并不复杂，其本质就是延迟图片的加载时间，只在需要的时候才加载。具体来说，懒加载技术通过以下步骤实现：

标记需要懒加载的图片： 在 HTML 代码中，为需要懒加载的图片添加特定的属性或类名，以标记其需要延迟加载。
监听滚动事件： 当用户滚动页面时，脚本会监听滚动事件，检测是否出现了需要懒加载的图片。
加载图片： 当检测到需要懒加载的图片进入可视区域时，脚本会触发图片的加载。

图片懒加载的好处

图片懒加载技术带来的好处显而易见：

提升页面加载速度： 通过只加载当前可视区域内的图片，可以大幅减少页面加载的带宽占用，从而提高页面加载速度。
改善用户体验： 更快的页面加载速度意味着用户不必等待图片全部加载即可查看页面内容，从而提升用户体验。
节省带宽： 只加载用户实际需要看到的图片，可以有效节省带宽，对于移动设备等带宽受限的场景尤为重要。

实现图片懒加载

实现图片懒加载有多种方法，以下介绍两种常见的实现方式：

1. JavaScript 实现

使用 JavaScript 实现图片懒加载较为简单，可以自由控制图片加载的时机和方式。以下是 JavaScript 实现的示例代码：

window.addEventListener('scroll', function() {
  const lazyImages = document.querySelectorAll('img[data-lazy-src]');
  lazyImages.forEach((img) => {
    if (isInViewport(img)) {
      img.src = img.getAttribute('data-lazy-src');
    }
  });
});

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}

2. Intersection Observer API

Intersection Observer API 是 HTML5 提供的原生 API，专门用于监听元素与视口之间的交集。使用该 API 可以更加方便地实现图片懒加载。以下是使用 Intersection Observer API 实现懒加载的示例代码：

const lazyImages = document.querySelectorAll('img[data-lazy-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.getAttribute('data-lazy-src');
      observer.unobserve(entry.target);
    }
  });
});

lazyImages.forEach((img) => {
  observer.observe(img);
});

图片懒加载注意事项

在使用图片懒加载技术时，需要注意以下事项：