图片懒加载+IntersectionObserver

通过IntersectionObserver实现图片懒加载

在JavaScript中，图片懒加载可以通过监听滚动事件和计算图片距离视口顶部的距离来实现

1. 在HTML中，将src属性设置为一个透明的1x1像素图片作为占位符，并将实际的图片URL设置为data-src属性。

   <img class="lazy" data-src="your-image-url.jpg" alt="描述">
   

2. 在JavaScript中，创建一个函数来处理图片懒加载。

   function lazyLoadImages() {
     const images = document.querySelectorAll('.lazy');
     const options = {
       root: null,
       rootMargin: '0px',
       threshold: 0.1, // 当图片的10%进入视口时加载图片
     };
   
     const observer = new IntersectionObserver((entries, observer) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const img = entry.target;
           const src = img.getAttribute('data-src');
           img.src = src;
           observer.unobserve(img); // 停止观察已加载的图片
         }
       });
     }, options);
   
     images.forEach(image => {
       observer.observe(image);
     });
   }
   

3. 在页面加载完成后调用lazyLoadImages函数。

   window.addEventListener('DOMContentLoaded', lazyLoadImages);
   

现在，当用户滚动页面并且图片进入视口时，图片将自动加载。这种方法可以提高页面加载速度，特别是对于包含大量图片的网页。