JS实现图片懒加载！4种方法教你优化网页性能

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS实现图片懒加载！提升网页性能的4种高效方法》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

图片懒加载的核心是延迟加载非首屏图片，等其进入可视区域时才加载，提升页面性能。具体实现方式包括：1.基于offsetTop和window.innerHeight进行简单判断；2.使用getBoundingClientRect优化可见性检测；3.利用Intersection Observer API异步监听元素可见性，性能更优；4.结合requestAnimationFrame优化滚动事件处理，避免页面卡顿。SEO优化可通过

图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户的可视区域时才加载。这样做可以显著提升页面加载速度，特别是当页面包含大量图片时。

解决方案

实现图片懒加载的核心在于监听图片的滚动事件，判断图片是否进入可视区域。 一旦图片进入可视区域，就将图片的src属性设置为真实的图片地址，从而触发图片的加载。

以下提供四种实现懒加载的技巧：

1. 基于offsetTop和window.innerHeight的简单实现

   这种方法是最基础的，通过比较图片距离页面顶部的距离(offsetTop)和窗口的内部高度(window.innerHeight)以及滚动条滚动的距离来判断图片是否可见。

   function lazyLoad() {
     const images = document.querySelectorAll('img[data-src]');
     images.forEach(img => {
       if (img.offsetTop < window.innerHeight + window.scrollY) {
         img.src = img.dataset.src;
         img.removeAttribute('data-src'); // 防止重复加载
       }
     });
   }
   
   // 监听滚动事件
   window.addEventListener('scroll', lazyLoad);
   
   // 页面加载完成时执行一次
   document.addEventListener('DOMContentLoaded', lazyLoad);

   这个方法虽然简单，但效率相对较低，每次滚动都会遍历所有图片。

2. 使用getBoundingClientRect优化判断

   getBoundingClientRect方法可以获取元素相对于视口的位置信息，避免了计算offsetTop和scrollY的麻烦，也更准确。

   function lazyLoad() {
     const images = document.querySelectorAll('img[data-src]');
     images.forEach(img => {
       const rect = img.getBoundingClientRect();
       if (rect.top <= window.innerHeight && rect.bottom >= 0 &&
           rect.left <= window.innerWidth && rect.right >= 0) {
         img.src = img.dataset.src;
         img.removeAttribute('data-src');
       }
     });
   }
   
   window.addEventListener('scroll', lazyLoad);
   document.addEventListener('DOMContentLoaded', lazyLoad);

   这种方法相对更高效，因为getBoundingClientRect是浏览器原生方法，性能较好。

3. 利用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;
         img.src = img.dataset.src;
         img.removeAttribute('data-src');
         observer.unobserve(img); // 停止监听已加载的图片
       }
     });
   });
   
   images.forEach(img => {
     observer.observe(img);
   });

   Intersection Observer API的优势在于它是异步的，不会阻塞主线程，而且可以设置阈值，控制图片在进入可视区域多少比例时才加载。

4. 结合requestAnimationFrame优化滚动事件处理

   频繁的滚动事件处理可能会导致页面卡顿。 使用requestAnimationFrame可以将滚动事件处理函数推迟到下一次浏览器重绘之前执行，从而提高性能。

   let ticking = false;
   
   function lazyLoad() {
     if (!ticking) {
       requestAnimationFrame(function() {
         // 上面的懒加载逻辑
         ticking = false;
       });
       ticking = true;
     }
   }
   
   window.addEventListener('scroll', lazyLoad);
   document.addEventListener('DOMContentLoaded', lazyLoad);

   requestAnimationFrame可以确保动画流畅，避免掉帧。

图片懒加载如何处理SEO优化？

懒加载虽然提升了用户体验，但也可能影响SEO。搜索引擎爬虫可能无法执行JavaScript，导致无法加载所有图片。解决办法：

• 使用

  <img data-src="image.jpg" alt="Image Description">
  <noscript><img src="image.jpg" alt="Image Description"></noscript>

• 使用服务器端渲染（SSR）： 在服务器端渲染页面，确保搜索引擎爬虫可以获取完整的HTML内容，包括所有图片。

• 使用Google推荐的懒加载方式： Google推荐使用loading="lazy"属性，这是一个浏览器原生的懒加载属性，搜索引擎可以识别。

  <img src="image.jpg" loading="lazy" alt="Image Description">

如何处理懒加载图片的占位问题？

在图片加载完成之前，需要为图片预留空间，避免页面布局发生跳动。常见的做法：

• 使用固定宽高： 为标签设置固定的宽度和高度。

• 使用CSS aspect-ratio属性： 设置图片的宽高比，让浏览器自动计算高度。

  img {
    aspect-ratio: 16 / 9; /* 设置宽高比 */
    object-fit: cover; /* 图片填充方式 */
  }

• 使用占位符图片： 使用低分辨率的占位符图片，在图片加载完成后替换为高清图片。

如何选择合适的懒加载实现方式？

选择哪种懒加载实现方式取决于项目的具体需求和兼容性要求。

• 简单项目或需要兼容旧版本浏览器： 可以选择基于offsetTop或getBoundingClientRect的实现方式。
• 现代项目且对性能要求较高： 推荐使用Intersection Observer API。
• 需要更精细的控制和优化： 可以结合requestAnimationFrame来处理滚动事件。
• 如果主要目标是提升Lighthouse得分，且没有兼容性问题： 直接使用loading="lazy"属性。

总之，选择合适的懒加载实现方式需要综合考虑性能、兼容性和SEO等因素。

今天关于《JS实现图片懒加载！4种方法教你优化网页性能》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于性能优化,SEO,图片懒加载,requestAnimationFrame,IntersectionObserverAPI的内容请关注golang学习网公众号！