面试高频手撕题 | 66.lazy-load实现

一、知识点

1. 懒加载：也称为延迟加载，是一种网页设计技术，它在用户需要时才加载页面的特定部分，而不是在页面加载时一次性加载所有内容。这可以提高页面的加载速度，减少初始加载时间，并节省用户的流量。

2. Intersection Observer API：这是一个 JavaScript API，用于异步检测目标元素与视口的交集情况。通过这个 API，可以在元素进入或退出视口时触发相应的回调函数，从而实现懒加载功能。

二、思路分析

1. 创建一个懒加载函数，该函数接受一个img元素作为参数。

2. 在函数内部，使用Intersection Observer API来监听img元素与视口的交集情况。

3. 如果img元素进入了视口，将其src属性设置为真实的图片路径，从而加载图片。

4. 如果img元素退出了视口，将其src属性设置为空字符串，从而卸载图片。

三、JavaScript 解答

以下是使用 JavaScript 实现懒加载的示例代码：

// 懒加载函数
function lazyLoadImage(img) {
  // 创建 IntersectionObserver 实例
  const observer = new IntersectionObserver((entries, observer) => {
    // 处理进入视口的元素
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 设置图片的 src 属性为真实路径
        img.src = entry.target.dataset.src;
        // 停止