const lazyImages = document.querySelectorAll('.lazy'); const lazyLoad = target => { const io = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.getAttribute('data-src'); img.setAttribute('src', src); img.classList.remove('lazy'); observer.disconnect(); } }); }); io.observe(target); }; lazyImages.forEach(lazyLoad);解释一下这段代码

这段代码使用了Intersection Observer API来实现图片懒加载。首先，通过document.querySelectorAll('.lazy')获取所有需要懒加载的图片元素，并将其存储在lazyImages变量中。

接下来定义了一个lazyLoad函数，该函数接受一个参数target，用来表示需要进行懒加载的图片元素。在lazyLoad函数中，创建了一个IntersectionObserver对象io，该对象用来观察目标元素是否进入视口。

当目标元素进入视口时，IntersectionObserver对象的回调函数会被触发，回调函数的参数entries是一个IntersectionObserverEntry数组，该数组包含了所有进入视口的元素信息。因此，forEach方法遍历每个进入视口的元素，如果该元素isIntersecting属性为true，表示该元素已经进入视口，则获取该元素的data-src属性值，并将其设置为该元素的src属性值，从而实现图片加载。同时，为了避免该元素被重复加载，还需要将其类名中的lazy移除，并调用observer.disconnect()来停止对该元素的观察。

最后，通过调用lazyImages.forEach(lazyLoad)将所有需要懒加载的图片元素传入lazyLoad函数进行懒加载处理。

相关问题

图片懒加载用Lazyload的哪几种方法

Lazyload 是一个常用的图片懒加载库，它支持以下几种方法：

1. 使用 HTML 属性

在 img 标签中添加 "data-src" 属性，将需要加载的图片地址作为属性值，再添加 "class" 属性，设置为 "lazyload"，如下所示：

<img class="lazyload" data-src="image.png" alt="Image">

2. 使用 JavaScript

先将需要懒加载的图片地址存储在一个数组中，再使用 JavaScript 获取所有需要懒加载的图片元素，将它们的 "src" 属性设置为一个占位符（如空白图片），再将 "data-src" 属性的值设置为需要加载的图片地址。

最后，在 window 对象的 "load" 和 "scroll" 事件中，判断图片是否进入可视区域，如果是，则将 "data-src" 属性的值赋给 "src" 属性，实现图片加载。

// 存储需要懒加载的图片地址
const images = [
  'image1.png',
  'image2.png',
  'image3.png'
];

// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazyload');

// 遍历所有图片元素，设置 src 属性为占位符，data-src 属性为需要加载的图片地址
lazyImages.forEach((lazyImage, index) => {
  lazyImage.src = 'placeholder.png';
  lazyImage.dataset.src = images[index];
});

// 判断图片是否进入可视区域，如果是，则将 data-src 属性的值赋给 src 属性
function lazyLoad() {
  lazyImages.forEach(lazyImage => {
    const imageTop = lazyImage.getBoundingClientRect().top;
    if (imageTop < window.innerHeight) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazyload');
    }
  });
}

// 监听 window 对象的 load 和 scroll 事件，执行懒加载
window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);

3. 使用 IntersectionObserver API

IntersectionObserver 是一个 Web API，它可以监测元素是否进入可视区域，可以用于图片懒加载。

首先，创建一个 IntersectionObserver 实例，设置回调函数，当被观察的元素进入可视区域时，会执行回调函数。在回调函数中，将 "data-src" 属性的值赋给 "src" 属性，实现图片加载。

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazyload');
      observer.unobserve(lazyImage);
    }
  });
});

// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazyload');

// 遍历所有图片元素，将其添加到 IntersectionObserver 实例中进行观察
lazyImages.forEach(lazyImage => {
  observer.observe(lazyImage);
});

IntersectionObserver图片懒加载代码

以下是IntersectionObserver图片懒加载的代码示例：

HTML：

<img class="lazy" data-src="image.jpg" alt="Image">

JavaScript：

const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');

        img.setAttribute('src', src);
        img.classList.remove('lazy');

        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

该代码使用了IntersectionObserver API来检测图片是否在视口中可见，如果可见则加载图片。这种方法可以提高页面加载速度和性能。