js 怎么实现图片懒加载

图片懒加载的核心是延迟加载非首屏图片，等到接近用户视野时再加载，能显著提升页面加载速度、节省流量、优化用户体验；2. 推荐使用 intersectionobserver api 实现，通过将真实图片地址存于 data-src，用 src 显示占位符，当元素进入视口时再赋值真实地址并停止观察，同时提供不支持时的降级方案；3. 懒加载对性能至关重要，能减少首屏请求量，提升 fcp 和 lcp 指标，减轻主线程压力，改善 fid，节省移动端流量，并间接提升 seo 排名；4. intersectionobserver 相比传统 scroll 事件监听优势明显，它异步非阻塞，由浏览器底层优化交叉检测，避免频繁 reflow 和 repaint，性能更高且 api 更简洁；5. 实现时需注意避免布局抖动（设置 width、height 或 aspect-ratio）、防止空白闪烁（使用 lqip 占位符）、避免首屏图片被懒加载、确保无 js 时的降级显示，并可结合 rootmargin 预加载、使用 native loading="lazy" 属性、配合 srcset 响应式加载及渐进式图片格式进一步优化体验。

图片懒加载，简单来说，就是让网页上的图片不是一股脑儿全加载出来，而是等到它们快要进入用户视野的时候，才真正去请求和渲染。这能显著提升页面初始加载速度，节省用户流量，让网站体验更流畅。

解决方案

实现图片懒加载，现代浏览器最推荐的方式是使用

IntersectionObserver

基本步骤是这样的：

1. HTML 结构调整： 不要直接在

   <img>

   登录后复制
   标签的

   src

   登录后复制
   属性中放置图片真实地址。取而代之，使用一个自定义的

   data-src

   登录后复制
   属性来存储真实地址，而

   src

   登录后复制
   可以放一个占位符，比如一个纯透明的 1x1 像素 GIF 或一个低质量的模糊版本。

   <img  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="描述图片内容" class="lazyload">

   登录后复制

2. JavaScript 逻辑： 创建一个

   IntersectionObserver

   登录后复制
   实例，它会监听所有带有

   lazyload

   登录后复制
   类（或者你定义的任何类）的图片。当图片进入视口时，我们将

   data-src

   登录后复制
   的值赋给

   src

   登录后复制
   ，然后停止观察该图片。

   document.addEventListener('DOMContentLoaded', () => {
       const lazyImages = document.querySelectorAll('img.lazyload');
   
       const observer = new IntersectionObserver((entries, observer) => {
           entries.forEach(entry => {
               if (entry.isIntersecting) {
                   const img = entry.target;
                   img.src = img.dataset.src;
                   img.onload = () => {
                       // 图片加载完成后，可以移除占位符类或添加加载完成的类
                       img.classList.remove('lazyload');
                       // 考虑移除 data-src 属性，避免不必要的 DOM 属性
                       // delete img.dataset.src;
                   };
                   observer.unobserve(img); // 停止观察已加载的图片
               }
           });
       }, {
           // root: null, // 默认是视口
           rootMargin: '0px 0px 100px 0px', // 在图片进入视口前100px就开始加载
           threshold: 0 // 只要有一个像素进入视口就触发
       });
   
       lazyImages.forEach(img => {
           observer.observe(img);
       });
   
       // 考虑兼容性：如果浏览器不支持 IntersectionObserver，可以提供一个降级方案
       if (!('IntersectionObserver' in window)) {
           // 简单的降级方案：直接加载所有图片（可能导致性能问题，但至少能显示）
           lazyImages.forEach(img => {
               img.src = img.dataset.src;
               img.classList.remove('lazyload');
           });
           // 或者使用更复杂的基于 scroll 和 getBoundingClientRect 的方案
           // 但那会复杂得多，并且性能不如 IntersectionObserver
       }
   });

   登录后复制

这个方案既考虑了性能，也兼顾了现代 Web 开发的最佳实践。

为什么图片懒加载对网站性能至关重要？

这问题问得好，因为懒加载绝不仅仅是“锦上添花”那么简单，它对网站的实际性能表现有着决定性的影响。从用户体验到搜索引擎排名，无处不在。

首先，最直观的，它能显著减少页面首次加载时的网络请求量和数据传输大小。想想看，一个包含几十张甚至上百张图片的页面，如果一股脑儿全加载，那得多大的带宽消耗？用户可能还在看页面顶部的内容，下面的图片却在悄悄消耗着流量和计算资源。懒加载就像一个聪明的管家，只在必要时才去取东西。这直接影响到首次内容绘制 (FCP) 和最大内容绘制 (LCP) 这些核心的性能指标，因为浏览器可以更快地渲染可见区域，而不是被大量图片请求阻塞。

其次，它能提升页面的响应速度和交互性。当浏览器忙于下载和解码大量图片时，JavaScript 的执行可能会被延迟，导致页面卡顿，用户点击按钮或滚动时感觉不流畅。懒加载减轻了主线程的压力，让页面在初期就能更快地响应用户操作，改善了首次输入延迟 (FID)。

再者，对于移动设备用户，这简直是福音。移动网络环境复杂多变，流量也可能有限。懒加载不仅节省了流量，也让页面在信号不佳时能更快地呈现出主要内容，而不是一直转圈圈。我个人在用手机浏览一些图片特别多的网站时，如果没做懒加载，体验真的糟糕透了，加载慢不说，流量哗哗地跑。

最后，别忘了搜索引擎优化 (SEO)。虽然现代搜索引擎爬虫（特别是 Google）已经具备了执行 JavaScript 的能力，能“看到”懒加载后的图片。但一个快速加载的网站，本身就是搜索引擎青睐的对象。更快的加载速度意味着更好的用户体验，这间接有助于提升网站的排名。而且，如果你的网站因为图片过多导致加载过慢，搜索引擎可能会认为用户体验不佳，从而影响你的评分。所以，这不仅仅是技术实现，更是用户体验和业务目标的双重考量。

IntersectionObserver

登录后复制

相比传统方法的优势在哪里？

在

IntersectionObserver

scroll

getBoundingClientRect()

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

0

查看详情

最大的痛点在于性能开销。每次用户滚动页面，

scroll

getBoundingClientRect()

而

IntersectionObserver

此外，

IntersectionObserver

所以，从根本上讲，

IntersectionObserver

实现懒加载时可能遇到的坑和优化建议？

即便有了

IntersectionObserver

常见的“坑”：

1. 布局抖动 (CLS - Cumulative Layout Shift)： 这是最常见也最令人头疼的问题之一。如果你的图片在加载前没有明确的宽度和高度（或者没有通过 CSS 设置

   aspect-ratio

   登录后复制
   ），那么当图片加载完成后，它会占据实际的空间，导致其下方的所有内容向下“跳动”。这不仅影响用户阅读，也会严重拖累用户体验评分（Core Web Vitals 中的 CLS 指标）。想想你正在阅读一篇文章，突然图片一加载，文字就往下跳了一大截，那种感觉真的很糟糕。
2. “闪烁”或空白： 在图片加载完成之前，如果

   src

   登录后复制
   属性是一个空白或很小的占位符，用户可能会看到一块空白区域。如果网络较慢，这种空白时间会更长，给用户一种“内容缺失”的感觉。
3. 首屏图片被懒加载： 很多时候，开发者会不加区分地给所有图片都加上懒加载。然而，对于首屏（Above-the-fold）可见的图片，它们应该被立即加载，而不是等待

   IntersectionObserver

   登录后复制
   触发。如果首屏图片也懒加载，反而会延迟用户看到关键内容的时间。
4. 无 JavaScript 降级： 如果用户禁用了 JavaScript，或者浏览器环境不支持

   IntersectionObserver

   登录后复制
   （尽管现在这种情况越来越少），你的图片可能永远不会加载。

优化建议：

1. 为图片设置明确的尺寸或

   aspect-ratio

   登录后复制
   ： 这是解决 CLS 的核心。在 HTML 中直接指定

   width

   登录后复制
   和

   height

   登录后复制
   属性，或者使用 CSS 的

   padding-bottom

   登录后复制
   技巧（结合

   position: absolute

   登录后复制
   ）来创建一个基于图片宽高比的占位符。现代 CSS 也可以直接使用

   aspect-ratio

   登录后复制
   属性。

   <img  width="800" height="600" class="lazyload">

   登录后复制

   或者 CSS:

   .image-container {
       position: relative;
       width: 100%;
       padding-bottom: 75%; /* 4:3 宽高比，即 600/800 = 0.75 */
       height: 0;
       overflow: hidden;
   }
   .image-container img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }

   登录后复制
2. 使用模糊占位符或 LQIP (Low Quality Image Placeholder)： 而不是一个纯空白的占位符，你可以加载一个非常小的、低质量的图片版本作为

   src

   登录后复制
   ，然后当真实图片加载完成后再替换掉。这能极大地提升用户体验，因为即使图片还没完全加载，用户也能看到一个模糊的预览。
3. 合理设置

   rootMargin

   登录后复制
   ： 在

   IntersectionObserver

   登录后复制
   的选项中，

   rootMargin

   登录后复制
   参数非常有用。你可以设置一个负值或正值，让图片在进入视口前（比如提前 100px）就开始加载。这样可以避免用户滚动到图片位置时，图片才开始加载而出现的短暂空白。

   { rootMargin: '0px 0px 200px 0px' } // 底部提前200px加载

   登录后复制
4. 排除首屏图片： 对于那些确定会在页面加载时就显示出来的图片，直接使用

   src

   登录后复制
   属性加载它们，不要应用懒加载逻辑。这可以通过手动标记，或者通过判断图片的位置来决定。
5. 浏览器原生

   loading="lazy"

   登录后复制
   属性： 这是一个非常棒的补充方案。现代浏览器已经支持在

   <img>

   登录后复制
   标签上直接使用

   loading="lazy"

   登录后复制
   属性。它让浏览器自己决定何时加载图片，通常与

   IntersectionObserver

   登录后复制
   类似。你可以将其作为第一层懒加载，然后用 JS 方案作为不支持

   loading="lazy"

   登录后复制
   浏览器的降级。

   <img src="path/to/your/image.jpg" loading="lazy" alt="描述图片内容">

   登录后复制

   注意，这种情况下，你可能就不需要

   data-src

   登录后复制
   了，因为浏览器会自己处理。但如果需要更精细的控制，或者兼容性要求高，JS 方案依然是必要的。

6. srcset

   登录后复制
   和

   sizes

   登录后复制
   结合： 懒加载不等于放弃响应式图片。结合

   srcset

   登录后复制
   和

   sizes

   登录后复制
   属性，确保在懒加载时也能根据用户的设备屏幕大小和分辨率加载最合适的图片，进一步节省带宽。
7. 渐进式图片加载： 对于大型图片，可以考虑使用渐进式 JPEG 或 WebP 格式，它们在下载过程中可以逐步显示图片内容，而不是等到完全下载后才显示。

处理这些细节，才能让图片懒加载真正发挥其性能优势，同时不牺牲用户体验。

以上就是js 怎么实现图片懒加载的详细内容，更多请关注php中文网其它相关文章！