HTML5图片懒加载技巧与IntersectionObserver应用

大家好，今天本人给大家带来文章《HTML5图片懒加载实现方法与IntersectionObserver应用》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

图片懒加载可提升网页性能，主要方法有：一、HTML5 loading="lazy"原生支持；二、IntersectionObserver精准控制；三、scroll+getBoundingClientRect降级方案；四、decoding="async"优化解码；五、srcset与sizes实现响应式加载。

如果网页中包含大量图片，但用户并未立即滚动到图片所在位置，则过早加载这些图片会增加初始页面加载时间与带宽消耗。HTML5 提供了原生的懒加载支持，并可通过 IntersectionObserver API 实现更精细的控制。以下是实现图片懒加载的多种方法：

一、使用 HTML5 原生 loading 属性

HTML5 在 标签中引入了 loading 属性，浏览器可据此延迟加载非关键图片。该属性由浏览器原生支持，无需 JavaScript，兼容性良好（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）。

1、将图片的 src 属性替换为 data-src，避免初始加载；

2、在 标签中添加 loading="lazy" 属性；

3、保留 src 属性并指向一张极小占位图（如 1×1 透明 GIF），同时设置 width 和 height 防止布局偏移；

4、示例代码：；

5、注意：仅当图片位于视口下方且未被显式设置为 eager 时，lazy 才生效；顶部首屏图片仍会正常加载。

二、基于 IntersectionObserver 的自定义懒加载

IntersectionObserver 是 HTML5 提供的异步监听目标元素与视口交叉状态的 API，可精准控制图片在进入视口前/后触发加载，避免轮询 scroll 事件带来的性能损耗。

1、为所有待懒加载图片统一添加 data-src 属性，并将 src 置为空或占位图；

2、获取全部具有 data-src 的 元素，存入 NodeList；

3、创建 IntersectionObserver 实例，配置 rootMargin（如 "0px 0px 200px 0px" 实现提前 200px 加载）；

4、遍历图片节点，调用 observer.observe(img) 开始监听；

5、在回调函数中，当 isIntersecting 为 true 时，将 img.dataset.src 赋值给 img.src，并移除 data-src 属性；

6、注意：需为图片设置明确的 width/height 或 aspect-ratio，否则加载时可能引发布局抖动。

三、降级方案：scroll + getBoundingClientRect 手动检测

针对不支持 IntersectionObserver 的旧版浏览器（如 IE、Android 4.4 WebView），可采用 scroll 事件结合 getBoundingClientRect() 判断图片是否进入可视区域，作为兼容性兜底策略。

1、为图片容器绑定 scroll 事件监听器，并使用 throttle 函数限制触发频率（如 100ms 一次）；

2、遍历所有待加载图片，对每个图片调用 element.getBoundingClientRect()；

3、检查返回对象的 top 是否小于窗口高度且 bottom 大于 0；

4、满足条件时，将 data-src 值赋给 src，并从待处理列表中移除该元素；

5、注意：必须在加载完成后解绑对应图片的检测逻辑，避免重复执行；滚动监听需在页面卸载前手动清除。

四、配合 decoding="async" 优化解码性能

图片解码（尤其是大图）可能阻塞主线程，decoding 属性可指示浏览器异步解码图片，提升滚动流畅度，常与懒加载联合使用。

1、在 标签中添加 decoding="async" 属性；

2、该属性适用于所有通过 src 或 srcset 加载的图片，包括懒加载完成后的图片；

3、与 loading="lazy" 组合使用时，浏览器将延迟加载并异步解码；

4、示例：；

5、注意：decoding 属性在 Safari 16.4+ 和 Chrome 95+ 中完全支持，旧版本将忽略该属性而不报错。

五、使用 srcset 与 sizes 实现响应式懒加载

在懒加载基础上进一步适配不同设备像素比与视口宽度，可结合 srcset 和 sizes 属性，确保仅加载当前设备所需尺寸的图片资源。

1、将高清图地址写入 data-srcset，占位图保留在 src；

2、为图片添加 data-sizes 属性（如 "(max-width: 768px) 100vw, 50vw"）；

3、在 IntersectionObserver 回调中，将 data-srcset 和 data-sizes 分别赋值给 srcset 和 sizes；

4、确保 src 始终指向一个最小可用占位图，防止无图状态空白；

5、注意：必须同步设置 width/height 或 CSS aspect-ratio，否则响应式切换时可能发生重排。

本篇关于《HTML5图片懒加载技巧与IntersectionObserver应用》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！