现实图片懒加载的几种方式

实现图片懒加载的几种方式：

1. 使用Intersection Observer API：这是一种现代且高效的懒加载实现方式，通过监听元素与视口的交叉状态来判断是否需要加载图片。

   function lazyLoad(img) {
     // 创建观察器
     const observer = new IntersectionObserver((entries, observer) => {
       entries.forEach(entry => {
         // 如果元素在视口内
         if (entry.isIntersecting) {
            // 替换占位符为实际的图片地址
           img.src = entry.target.dataset.src;
           // 取消观察
           observer.unobserve(entry.target);
         }
       });
     },
     {
       rootMargin: '0px 0px 50px 0px', // 设置根元素的外边距
       threshold: 0.01 // 设置交叉阈值
     });
   
     observer.observe(img);
   }
   // 将所有图片元素添加到观察器中
   document.querySelectorAll('[data-src]').forEach(img => lazyLoad(img));

2. scroll事件是浏览器在滚动时触发的事件，可以用来实现一些与滚动相关的功能，例如图片懒加载、无限滚动等。当用户滚动页面时，scroll事件会被触发，可以通过监听这个事件来判断元素是否在视口中，从而决定是否加载图片。

   getBoundingClientRect是一个DOM元素的方法，返回一个包含元素位置和尺寸信息的对象。这个方法返回的对象包含了top、right、bottom和left四个属性，分别表示元素的上边、右边、下边和左边相对于视口的位置。通过这些信息，可以判断元素是否在视口中。 

   首先定义了一个isInViewport函数，用于判断元素是否在视口中。然后定义了一个lazyLoad函数，用于实现图片懒加载。在这个函数中，我们监听scroll事件，并在事件处理函数中调用isInViewport函数判断图片是否在视口中。如果在视口中，就移除scroll事件的监听，并将图片的src属性设置为数据属性data-src的值，从而实现图片懒加载。最后，我们为所有带有data-src属性的图片元素调用lazyLoad函数，实现图片懒加载。

   结合scroll事件和getBoundingClientRect方法，可以实现一个简单的图片懒加载功能:

   function isInViewport(element) {
     const rect = element.getBoundingClientRect();
     return (
       rect.top >= 0 &&
       rect.left >= 0 &&
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     );
   }
   
   function lazyLoad(img) {
     const onScroll = () => {
       if (isInViewport(img)) {
         window.removeEventListener('scroll', onScroll);
         img.src = img.dataset.src;
       }
     };
   
     window.addEventListener('scroll', onScroll);
   }
   
   document.querySelectorAll('[data-src]').forEach(img => lazyLoad(img));