使用IntersectionObserver实现懒加载

目录

1.intersectionObserver概述

2.使用方式：

2.1 懒加载的代码实例※

2.2 图片懒加载的实现流程

2.3 IntersectionObserver的重要方法

3.使用场景：图片懒加载、无限滚动（加载更多内容）、 广告曝光统计等。

1.intersectionObserver概述

它是一个浏览器提供的 异步观察器，用于监听某个元素与视口（或其他指定容器）的交叉状态，相比传统的 scroll 事件监听，它性能更好，因为它是 异步 + 节流 的，不会频繁触发。

2.使用方式：

2.1 懒加载的代码实例※

// 核心原理：通过监听目标元素和视口的交叉比例（即重叠区域占目标元素的比例），在达到预设阈值时触发回调函数
const observer = new IntersectionObserver((entries) => {
// entries是一个数组，包含所有被观察的元素中状态发生变化的元素
  entries.forEach(entry => {
      // isIntersecting：布尔值，表示目标是否进入视口，进入视口后才进行图片的加载
	if (entry.isIntersecting) {
  		const img = entry.target;          // 获取目标图片元素
  		img.src = img.dataset.src;         // 加载真实图片地址
  		observer.unobserve(img);           // 停止观察（避免重复加载），优化性能
	}
  });
},{ threshold: 1 });// threshold 为添加阈值，范围为 0 ~ 1，表示元素 0% ~ 100% 可见时触发
// 被观察的DOM元素
const target = document.querySelector('#your-element');
observer.observe(target);

2.2 图片懒加载的实现流程

页面加载
   ↓
<img data-src="real.jpg" src="placeholder.jpg">  ← 初始状态
   ↓
用户滚动页面
   ↓
图片完全进入视口
   ↓
触发 IntersectionObserver 回调
   ↓
img.src = img.dataset.src  ← 加载真实图片
   ↓
observer.unobserve(img)    ← 停止观察

2.3 IntersectionObserver的重要方法

IntersectionObserver	用于监听元素是否进入视口
entry.isIntersecting	判断元素是否可见
observe()	开始监听某个元素
unobserve()	停止监听某个元素

3.使用场景

图片懒加载、无限滚动（加载更多内容）、 广告曝光统计等。