利用原生JS实现懒加载lazyLoad的三种方法总结

关于“利用原生JS实现懒加载lazyLoad的三种方法总结”，这是一个非常常见的需求，下面我详细讲解一下相关的攻略：

什么是懒加载

懒加载，也叫延迟加载，它指的是在图片或者其他资源需要显示时才进行加载，相应的，在一开始不需要显示时，可以通过预加载等方式来进行优化，从而提升页面性能，减少请求次数等。

实现懒加载几种常见的方式

1. IntersectionObserver

IntersectionObserver 是一个新的 API，它可以监听元素的可见性变化，从而实现懒加载。使用此方法，我们可以直接监听图片元素是否进入可视区域来判断是否需要加载图片。使用步骤如下：

1.1 HTML 结构

首先需要在需要进行懒加载的图片上使用占位符，例如以下代码：

<img src="loading.gif" data-src="image.jpg" alt="图片">

在这里，我们使用 data-src 属性来存储真正需要加载的图片地址。在 HTML 中，使用 loading.gif 这张图片作为占位符。

1.2 JS 实现

接下来，就可以使用 IntersectionObserver 来监听图片是否进入视口了。代码示例如下：

let observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        // 如果元素的交叉比例大于零，表示图片进入了视口，可以加载图片
        entry.target.src = entry.target.dataset.src; // 将 data-src 的值赋值到 src 属性上
        observer.unobserve(entry.target); // 加载完成后，停止监听当前元素
      }
    });
  },
  {
    threshold: 0.01, // 交叉比例
  }
);

// 监听所有需要进行懒加载的图片
document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

在这里，首先使用 IntersectionObserver 构造函数创建一个新的实例，然后在构造函数中通过回调函数检查所有进入视口的元素，如果出现了设置，就将 data-src 属性值赋值给 src 属性，从而实现图片的加载。

2. 滚动事件监听

另外一种方式就是通过监听滚动事件来实现懒加载。代码示例如下：

// 获取所有需要进行懒加载的图片
let lazyImgs = document.querySelectorAll('img[data-src]');

// 滚动事件监听函数
let lazyLoad = function () {
  lazyImgs.forEach((img) => {
    // 获取图片距离页面顶部的距离
    let imgTop = img.getBoundingClientRect().top;
    let windowHeight =
      window.innerHeight || document.documentElement.clientHeight;
    // 如果图片进入了视口
    if (imgTop < windowHeight && imgTop > 0) {
      // 将 data-src 的值赋值到 src 属性上
      img.src = img.dataset.src;
      // 加载完成后，删除监听事件
      img.addEventListener('load', () => {
        img.removeAttribute('data-src');
      });
    }
  });
};

// 立即执行一次懒加载函数
lazyLoad();

// 添加滚动事件监听
window.addEventListener('scroll', lazyLoad);

在这里，我们首先需要获取所有需要进行懒加载的图片，然后监听滚动事件，判断图片是否进入视口，如果是，则进行加载操作。关于图片可见区域的计算，可以使用 getBoundingClientRect() 方法获取。

这种方式的缺点是，如果有大量的图片需要进行懒加载，那么随着滚动事件的不断执行，这些函数就会不断地被调用，进而导致页面性能损失。

总结

以上就是实现懒加载的三种方式总结。其中，IntersectionObserver 方式是目前最为推荐的方式。它不仅可以实现懒加载，还可以用于动态调整页面元素的布局等。另外，在使用 IntersectionObserver 方法时，我们还可以设置一个 root 参数，来指定该元素的父容器，从而进一步提升性能。