图片的“懒”加载

 懒加载是什么

        懒加载（Lazy Loading）是一种优化网页性能的技术，它的主要目的是延迟加载页面上的资源（如图片、视频、音频等），直到用户需要访问它们的时候再进行加载。这种技术可以减少初始页面加载时所需的资源量，提高页面加载速度，并节省带宽和用户流量。说白了就是在加载我们看到的可视页面中的图片时，当我们没有滑动页面的时候，页面中看不到的区域中的图片不会加载。

        传统的网页加载方式是一次性加载所有的资源，包括可见区域内和不可见区域内的内容。这可能导致页面加载时间过长，尤其是当页面包含大量的图片或其他媒体资源时。而懒加载则通过只加载当前可见区域内的资源，将不可见区域的资源推迟加载，从而提高页面的加载速度。

        懒加载的工作原理通常是通过 JavaScript 来实现的。当页面滚动到某个元素进入可见区域时，JavaScript 会检测该元素，并触发加载相应的资源。这可以通过监听滚动事件或使用 Intersection Observer API 来实现。

懒加载的优点

        1. 提高页面加载速度：只加载当前可见区域内的资源，减少了初始页面加载时所需的资源量，从而加快页面的加载速度。

        2. 节省带宽和用户流量：推迟加载不可见区域的资源可以减少网络请求的数量，节省用户的带宽和流量消耗。

        3. 改善用户体验：用户只需等待当前可见区域的内容加载完成，而不需要等待整个页面的加载完成，提升了用户的交互体验。

懒加载在许多网站和应用中被广泛应用，特别是在包含大量媒体资源的页面中，如图片分享平台、新闻网站、电子商务网站等。它是一种有效的优化技术，可以改善网页性能，提升用户体验。

下面我们来实现一下

HTML

先设置img标签

<img class="lazy" data-src="your-img.jpg" alt="your-img">

Css

我们可以把默认显示的图片替换成一个占位图片，可以有效地提升用户体验。

.lazy {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
}

JavaScript

当图片出现在视窗中，将图片的data-src属性赋给src属性，并且设置其透明度从0到1渐变

function lazyLoadImage() {
  let lazyImages = document.querySelectorAll('.lazy');
  let observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.intersectionRatio > 0) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('fade');
        observer.unobserve(img);
      }
    });
  });
  lazyImages.forEach(function (lazyImage) {
    observer.observe(lazyImage);
  });
}
lazyLoadImage();