原生JS实现图片懒加载(lazyload)实例

下面就来详细讲解原生JS实现图片懒加载(lazyload)实例的完整攻略。

什么是懒加载(lazyload)

懒加载（也称为延迟加载）是一种在网页上优化图片加载的技术，它可以减少网页的初次加载时间，提高用户体验。懒加载的原理是在页面初始加载时，只加载可视区域内的图片，当用户滑动页面时，再加载其他区域的图片，这样可以避免一次性请求大量的图片资源，减少页面的下载量。

实现懒加载的步骤

实现懒加载的主要步骤如下：

1. 在页面中标记需要懒加载的图片元素，例如使用 data 属性存储图片的真实地址。
2. 监听窗口滚动事件，在滚动时计算出当前可视区域的范围。
3. 遍历所有需要懒加载的图片元素，判断它们是否在可视区域内，如果在则将真实的图片地址替换成 src 属性，实现图片的加载。

接下来我们将通过两个示例来详细讲解如何实现懒加载。

示例一：基本的懒加载实现

首先，我们在页面中添加需要懒加载的图片元素，如下所示：

<!-- 在 img 元素中使用 data-src 存储真实的图片地址 -->
<img data-src="image1.jpg" alt="image1">
<img data-src="image2.jpg" alt="image2">
<img data-src="image3.jpg" alt="image3">
<!-- ... -->

然后，我们在页面底部添加如下的 JavaScript 代码：

window.addEventListener('scroll', function() {
  const images = document.querySelectorAll('img[data-src]');  // 找到所有需要懒加载的图片
  for (let i = 0; i < images.length; i++) {
    if (isInViewport(images[i])) {  // 判断图片是否在可视区域内
      images[i].src = images[i].dataset.src;  // 将 data-src 属性替换为 src 属性，实现图片的加载
      images[i].removeAttribute('data-src');  // 移除 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)
  );
}

代码中，我们首先通过 document.querySelectorAll 方法找到所有需要懒加载的图片元素，然后遍历这些元素，利用 isInViewport 函数判断图片是否在可视区域内，如果在则将 data-src 属性替换为 src 属性，实现图片的加载。

示例二：使用 IntersectionObserver API

除了通过监听窗口滚动事件实现懒加载外，我们还可以使用 IntersectionObserver API 来更简单、高效地实现懒加载，这是一个浏览器原生支持的 API。

首先，我们定义一个 LazyLoad 类：

class LazyLoad {
  constructor(selector) {
    this.images = document.querySelectorAll(selector);  // 找到所有需要懒加载的图片
    this.intersectionObserver = new IntersectionObserver(this.onIntersection.bind(this), {
      rootMargin: '100px 0px',  // 额外的区域，用于提前加载图片
      threshold: 0.01  // 监听元素可见度的阈值
    });
    this.init();
  }

  init() {
    this.images.forEach(img => this.intersectionObserver.observe(img));  // 将所有图片元素添加到观察者对象中进行监听
  }

  onIntersection(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {  // 判断元素是否在可见区域
        const image = entry.target;
        this.loadImage(image);  // 加载图片
        this.intersectionObserver.unobserve(image);  // 取消对元素的监听，提高性能
      }
    });
  }

  loadImage(image) {
    const src = image.dataset.src;
    if (!src) {  // 检查是否已加载
      return;
    }
    image.src = src;  // 将 data-src 替换为 src，实现图片的加载
    image.removeAttribute('data-src');
  }
}

然后，我们可以在页面中创建一个 LazyLoad 对象来进行图片懒加载：

const lazyLoad = new LazyLoad('img[data-src]');

代码中，我们通过先找到所有需要懒加载的图片元素，然后利用 IntersectionObserver 对象来监听这些元素是否在可视区域内，如果是则触发 onIntersection 回调进行图片的加载。在加载图片时，我们将 data-src 属性替换为 src 属性，实现图片的懒加载。

总结：通过以上两种方式实现图片的懒加载为我们提供了更好的用户体验。