图片懒加载

图片懒加载的原理和实例

原理

图片懒加载是一种前端优化技术，当用户滚动页面时，只有当图片出现在视口中时，图片才会开始加载。这种延迟加载可以减少页面的初始加载时间，并提高页面的性能和用户体验。注意：仅初始的加载时间哦！

图片懒加载的原理是利用 JavaScript 监听用户的滚动事件。当用户滚动到页面中的某个图片时，JavaScript 会检查该图片是否在视口中。如果是，那么图片的地址就会被加载到图片标签的 src 属性中，从而触发图片的加载。如果不是，那么图片的地址就不会被加载，直到用户滚动到该图片位置时才会被加载。

通常，图片懒加载使用占位符或小的低分辨率的图片代替真实的图片，以保持页面布局的一致性，并让用户知道这里有一张图片将要加载。一旦真实的图片加载完成，它将替换占位符或低分辨率图片，从而提高页面的质量。

实例

让我们编写一小段html代码，有一个页面，其中包含多张图片。在不使用图片懒加载的情况下，所有图片都会在页面加载时一次性加载，这可能会导致页面加载速度变慢。

现在我们来使用图片懒加载来优化页面。我们可以将所有图片的 src 属性设置为一个占位符（例如 data-src），然后使用 JavaScript 监听窗口滚动事件。每当用户滚动时，我们检查所有的图片是否已经进入视口，如果是，则将 data-src 属性替换为 src 属性，这样图片就会开始加载。

data-\* 全局属性形成一类称为自定义数据属性的属性，它允许通过脚本在 HTML及其 DOM 表示形式之间交换专有信息。

以下是一个简单的示例代码，用于实现图片懒加载：

<!-- 在 img 标签的 src 属性中使用占位符 -->
<img data-src="image1.jpg" alt="Image 1">
<img data-src="image2.jpg" alt="Image 2">
<img data-src="image3.jpg" alt="Image 3">
<!-- 省略其它图片 -->

<script>
  // 使用 JavaScript 实现图片懒加载
  const images = document.querySelectorAll('img[data-src]');

  function lazyLoad() {
    images.forEach((image) => {
      if (isInViewport(image)) {
        image.setAttribute('src', image.getAttribute('data-src'));
        image.removeAttribute('data-src');
      }
    });
  }

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

  // 监听窗口滚动事件，并触发图片懒加载函数
  window.addEventListener('scroll', lazyLoad);
</script>

在上面的代码中，我们首先选取了所有带有 data-src 属性的图片，并定义了一个名为 lazyLoad 的函数，它会在滚动事件发生时被调用。在 lazyLoad 函数中，我们检查每个图片是否在视口中，并根据需要将 data-src 属性替换为 src 属性。最后，我们将 lazyLoad 函数绑定到窗口滚动事件上，以便实现图片懒加载。