JS图片懒加载的4种优化技巧

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JS实现图片懒加载的4种优化方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

图片懒加载的核心实现方法有三种：1. 使用 data-src 属性 + 滚动监听；2. 使用 Intersection Observer API；3. 结合 requestAnimationFrame 优化滚动监听。此外，还可通过设置 offset 或 rootMargin 实现预加载，选择合适的占位图优化体验，并通过 onerror 处理加载失败问题，测试时可通过开发者工具的 Network 面板观察图片是否按需加载。

图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户视口（或者即将进入）时才加载。这样可以显著提高页面初始加载速度，优化用户体验，特别是对于图片较多的页面。

解决方案

实现懒加载的核心在于：监听图片的 src 属性，当图片进入视口时，才将真实的图片地址赋给 src。

1. 基础实现：data-src 属性 + 滚动监听

   

   这是最常见的做法。首先，将图片的真实地址放到 data-src 属性中，src 属性留空或者放一张占位图。

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

   然后，通过 JavaScript 监听滚动事件，判断图片是否进入视口。

   const images = document.querySelectorAll('img[data-src]');
   
   function loadImage(img) {
     img.src = img.dataset.src;
     img.removeAttribute('data-src'); // Optional: Remove data-src after loading
   }
   
   function isElementInViewport(el) {
     const rect = el.getBoundingClientRect();
     return (
       rect.top >= 0 &&
       rect.left >= 0 &&
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     );
   }
   
   function checkImages() {
     images.forEach(img => {
       if (isElementInViewport(img)) {
         loadImage(img);
       }
     });
   }
   
   document.addEventListener('scroll', checkImages);
   window.addEventListener('resize', checkImages); // Also check on resize
   checkImages(); // Initial check

   这种方法简单直接，但缺点是需要频繁监听滚动事件，可能会影响性能。

2. 使用 Intersection Observer API

   Intersection Observer API 是一种更高效的方式来监听元素是否进入视口，它基于浏览器的优化，避免了频繁的滚动监听。

   const images = document.querySelectorAll('img[data-src]');
   
   const observer = new IntersectionObserver((entries, observer) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         const img = entry.target;
         loadImage(img);
         observer.unobserve(img); // Stop observing after loading
       }
     });
   });
   
   images.forEach(img => {
     observer.observe(img);
   });
   
   function loadImage(img) {
     img.src = img.dataset.src;
     img.removeAttribute('data-src');
   }

   Intersection Observer API 性能更好，推荐使用。

3. 结合 requestAnimationFrame 优化滚动监听

   如果选择使用滚动监听，可以结合 requestAnimationFrame 来降低滚动事件的处理频率，提高性能。

   let ticking = false;
   
   document.addEventListener('scroll', function(e) {
     if (!ticking) {
       window.requestAnimationFrame(function() {
         checkImages();
         ticking = false;
       });
       ticking = true;
     }
   });

   requestAnimationFrame 保证了回调函数在浏览器重绘之前执行，避免了不必要的计算。

4. 预加载机制

   有时候，我们希望图片在进入视口 之前 就开始加载，这样可以避免用户看到图片加载过程。 可以在 isElementInViewport 函数中增加一个 offset 值。

   function isElementInViewport(el, offset = 100) {
     const rect = el.getBoundingClientRect();
     return (
       rect.top >= -offset &&
       rect.left >= 0 &&
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset &&
       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     );
   }

   或者，使用 Intersection Observer API 的 rootMargin 选项。

   const observer = new IntersectionObserver((entries, observer) => { ... }, {
     rootMargin: '100px 0px' // Top and bottom margins
   });

   rootMargin 可以控制触发 Intersection Observer 的边界。

如何选择合适的占位图？

选择占位图需要考虑以下几个因素：

• 大小： 占位图应该尽可能小，避免增加初始加载时间。可以使用纯色背景或者矢量图。
• 尺寸： 占位图的尺寸应该和真实图片的尺寸接近，避免页面布局跳动。
• 风格： 占位图的风格应该和页面整体风格一致，避免突兀感。
• 颜色： 可以使用图片的平均颜色作为占位图的颜色，或者使用模糊处理后的图片作为占位图。

一些常用的占位图方案包括：

• 纯色背景： 使用和图片主题颜色相近的纯色背景。
• 矢量图： 使用简单的矢量图形作为占位图。
• LQIP (Low Quality Image Placeholder)： 使用极低质量的图片作为占位图。
• SQIP (SVG-Based Image Placeholder)： 使用 SVG 版本的图片作为占位图。

懒加载图片加载失败了怎么办？

图片懒加载过程中，可能会因为网络问题或者其他原因导致图片加载失败。为了提高用户体验，需要处理图片加载失败的情况。

• 显示默认图片： 当图片加载失败时，显示一张默认图片。可以使用 onerror 事件来监听图片加载失败。

  <img data-src="image.jpg" src="placeholder.gif" alt="Image" onerror="this.onerror=null; this.src='default.jpg'">

• 重试加载： 可以尝试重新加载图片。可以使用 setTimeout 函数来延迟一段时间后重新加载。

  img.onerror = function() {
    setTimeout(() => {
      img.src = img.dataset.src;
    }, 3000); // Retry after 3 seconds
  };

• 错误提示： 可以显示错误提示信息，告诉用户图片加载失败。

如何测试懒加载是否生效？

测试懒加载是否生效，可以按照以下步骤进行：

1. 打开开发者工具： 打开浏览器的开发者工具（通常按 F12 键）。
2. 切换到 Network 面板： 在开发者工具中，切换到 Network 面板。
3. 禁用缓存： 勾选 "Disable cache" 选项，确保每次加载都是从服务器获取资源。
4. 清空记录： 点击 "Clear" 按钮，清空之前的网络请求记录。
5. 滚动页面： 滚动页面，观察 Network 面板中的图片请求。

如果懒加载生效，应该只看到当前视口内的图片请求，而不是一次性加载所有图片。可以尝试快速滚动页面，观察图片是否按需加载。另外，可以观察图片的加载时间，如果加载时间过长，需要优化图片大小或者网络连接。还可以使用 Lighthouse 等工具来评估页面性能，并根据评估结果进行优化。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~