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. 这样，图片就完成了懒加载，只有在它们进入视口时才会被加载。