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来检测图片是否在视口中可见，如果可见则加载图片。这种方法可以提高页面加载速度和性能。

相关问题

intersectionobserver懒加载代码实现

好的，以下是一个基于IntersectionObserver实现图片懒加载的示例代码：

HTML结构：

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

JavaScript代码：

let lazyImages = document.querySelectorAll('.lazyload');
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      let lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazyload');
      lazyImageObserver.unobserve(lazyImage);
    }
  });
});

lazyImages.forEach(function(lazyImage) {
  lazyImageObserver.observe(lazyImage);
});

解释：

1. 我们先获取所有class为“lazyload”的图片元素，以及创建一个IntersectionObserver实例lazyImageObserver。
2. 然后遍历所有图片元素，对每个元素调用lazyImageObserver的observe()方法，将其添加到懒加载队列中。
3. 当图片元素进入视口（即可见）时，IntersectionObserver实例会调用回调函数，其中entries参数是一个IntersectionObserverEntry对象数组，表示进入视口的元素。
4. 我们遍历这个数组，对于每个进入视口的元素，我们将其data-src属性值赋给src属性，去掉“lazyload”类，然后从懒加载队列中移除（unobserve()方法）。
5. 这样，图片就完成了懒加载，只有在它们进入视口时才会被加载。

IntersectionObserver怎么实现懒加载

IntersectionObserver是一种新的API，可以用于实现懒加载。懒加载是指在页面滚动时，只加载可视区域内的内容，而不是一次性加载所有内容。这样可以优化网页加载速度，提升用户体验。

下面是IntersectionObserver实现懒加载的步骤：

1. 创建一个IntersectionObserver对象：可以通过其构造函数创建。

2. 选取需要进行懒加载的图片或其他DOM元素，将其包裹在一个容器元素中。

3. 使用IntersectionObserver对象的observe方法来观察容器元素。

4. 在回调函数中获取到可见性变化的元素，如果元素进入可视区域，就将其src属性指向真实图片的地址，实现图片的懒加载。

下面是一个示例代码：

let lazyImages = document.querySelectorAll('.lazy-image');

let options = {
  root: null, // 窗口视图作为根元素
  rootMargin: '0px', // 不添加边框
  threshold: 0.1 // 当可见性达到10%时触发回调
};

let observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) { // 元素进入可见视图
      let lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      observer.unobserve(lazyImage); // 取消观察
    }
  });
}, options);

lazyImages.forEach(lazyImage => {
  observer.observe(lazyImage);
});

在上面的代码中，我们首先选取了所有带有lazy-image类的图片元素，然后创建了一个IntersectionObserver对象，指定了观察的根元素和触发回调的阈值。接着，我们遍历了所有图片元素，使用observe方法观察了每个元素。在回调函数中，我们判断元素是否进入了可视区域，如果是，就将该元素的data-src属性值赋给src属性，实现懒加载，然后取消对该元素的观察。最后，我们通过forEach方法将所有图片元素添加到IntersectionObserver的观察列表中。

注意，容器元素的宽高需要在CSS中指定，否则IntersectionObserver无法准确计算元素的可见性。同样，图片元素的真实地址需要通过data-src属性指定，而不是src属性。