利用原生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() 方法获取。
这种方式的缺点是，如果有大量的图片需要进行懒加载，那么随着滚动事件的不断执行，这些函数就会不断地被调用，进而导致页面性能损失。