JS图片懒加载实现方法全解析

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JS实现图片懒加载方法详解》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

图片懒加载的实现首先通过将img标签的src替换为data-src来延迟加载，1. 使用IntersectionObserver监听图片是否进入可视区域，进入则加载；2. 兼容性不足时可引入polyfill；3. 可通过getBoundingClientRect或计算偏移量判断，但性能较差；4. 推荐IntersectionObserver因其性能高、异步且代码简洁；5. 优化体验可结合预加载、占位图、图片压缩、CDN加速和响应式图片，从而显著提升页面加载速度与用户体验。

图片懒加载，简单来说，就是先不加载页面上的所有图片，而是只加载可视区域内的图片，当图片滚动到可视区域时，再动态加载。这样做可以显著提升页面加载速度，尤其是在图片较多的页面上。

实现图片懒加载，主要思路是：监听滚动事件，判断图片是否进入可视区域，如果进入，则加载图片。

解决方案

1. HTML结构：

   

   首先，在HTML中，将标签的src属性替换为data-src，并将src属性留空。data-src属性用于存储图片的真实地址。

   <img data-src="image1.jpg" src="" alt="Image 1">
   <img data-src="image2.jpg" src="" alt="Image 2">
   <img data-src="image3.jpg" src="" alt="Image 3">

2. JavaScript代码：

   

   function lazyLoad() {
     const images = document.querySelectorAll('img[data-src]');
     const observer = new IntersectionObserver((entries, observer) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const img = entry.target;
           img.src = img.dataset.src;
           img.removeAttribute('data-src'); // 移除data-src，避免重复加载
           observer.unobserve(img); // 停止观察已加载的图片
         }
       });
     });
   
     images.forEach(image => {
       observer.observe(image);
     });
   }
   
   document.addEventListener('DOMContentLoaded', lazyLoad); // 页面加载完成后执行

   这段代码使用了IntersectionObserver API，这是一个现代浏览器提供的用于监听元素是否进入可视区域的API。

   • IntersectionObserver 创建一个观察者，它会监听指定元素（这里是所有的img[data-src]）是否进入可视区域。
   • entries 是一个数组，包含了所有被观察的元素的状态信息。
   • entry.isIntersecting 表示元素是否进入了可视区域。
   • 如果元素进入了可视区域，就将data-src的值赋给src，从而加载图片。
   • 加载完成后，移除data-src属性，避免重复加载，并且停止观察该图片。
   • observer.observe(image) 开始观察指定的图片元素。

3. 兼容性处理：

   IntersectionObserver API在一些老版本的浏览器中可能不支持。可以使用polyfill来解决兼容性问题。 可以引入polyfill.io提供的polyfill，或者使用lazysizes库，它已经包含了polyfill。

   <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

如何判断图片是否进入可视区域？

除了IntersectionObserver，还有其他方法可以判断图片是否进入可视区域，例如：

• 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() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(img => {
      if (isInViewport(img)) {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      }
    });
  }
  
  document.addEventListener('scroll', lazyLoad);
  document.addEventListener('DOMContentLoaded', lazyLoad);

  这种方法需要监听scroll事件，并在滚动时不断判断图片是否进入可视区域，性能上不如IntersectionObserver。

• 计算offsetTop和scrollTop： 这种方法需要手动计算元素距离文档顶部的距离，以及滚动条滚动的距离，比较繁琐，不推荐使用。

为什么推荐使用IntersectionObserver？

IntersectionObserver API的优势在于：

• 性能优化： IntersectionObserver是由浏览器原生提供的，使用了浏览器的优化机制，性能更高。 它不会频繁触发回调函数，只有在元素进入或离开可视区域时才会触发。
• 异步处理： IntersectionObserver是异步执行的，不会阻塞主线程，避免页面卡顿。
• 代码简洁： 使用IntersectionObserver可以简化代码，提高可读性。

如何优化图片懒加载的体验？

• 预加载： 可以在图片进入可视区域之前，提前加载一部分图片，避免用户滚动到图片时出现短暂的空白。 可以使用IntersectionObserver的rootMargin选项来实现预加载。

  const observer = new IntersectionObserver((entries, observer) => {
    // ...
  }, {
    rootMargin: '200px 0px' // 提前200px加载
  });

• 占位图： 在图片加载完成之前，可以使用占位图来填充图片区域，避免页面布局抖动。 可以使用纯色背景、模糊图片或SVG占位图。

• 图片优化： 对图片进行压缩，减小图片体积，可以加快图片加载速度。 可以使用工具如TinyPNG或ImageOptim。

• CDN加速： 使用CDN加速可以提高图片的访问速度，尤其是在用户分布在不同地区的情况下。

• 响应式图片： 根据不同的屏幕尺寸，加载不同大小的图片，可以节省流量，提高加载速度。 可以使用元素或srcset属性来实现响应式图片。 例如:

  <img
    srcset="small.jpg 480w,
            medium.jpg 800w,
            large.jpg 1200w"
    sizes="(max-width: 600px) 480px,
           (max-width: 900px) 800px,
           1200px"
    src="large.jpg"
    alt="Responsive Image">

总的来说，图片懒加载是一个重要的性能优化手段。 使用IntersectionObserver API可以方便地实现图片懒加载，并获得更好的性能。 结合预加载、占位图、图片优化和CDN加速等手段，可以进一步提升用户体验。

今天关于《JS图片懒加载实现方法全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！