HTML5怎样实现图片懒加载_HTML5实现图片懒加载思路【性能】 苏承栈 2026-09-30 • 👁 0人浏览过 loading="lazy"最简单但兼容性有限，仅支持现代浏览器的和；IntersectionObserver更可靠，需合理设置rootMargin和threshold；慎用scroll事件；服务端配合Client-Hints可优化加载内容。 用 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">loading="lazy"</code></div> 属性最简单，但兼容性和语义有坑 现代 浏览器 （Chrome 76+、Firefox 75+、Safari 15.4+）原生支持 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">loading="lazy"</code></div> ，只需给 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 加上这个属性即可触发懒加载： <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 但它只对 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 和 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><iframe></code></div> 生效；不支持背景图、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><picture></code></div> 内的 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><source></code></div> ；且 Safari 对内联 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">srcset</code></div> 的处理存在延迟渲染失效问题。如果页面需支持 iOS 15.0–15.3 或旧版 Android WebView，这个属性会静默退化为 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">loading="eager"</code></div> 。 IntersectionObserver 是可靠 fallback，但要注意 rootMargin 和阈值 当需要精确控制、兼容老环境，或处理非 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div> 元素（如 伪元素 背景图容器）时， <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">IntersectionObserver</code></div> 是首选。关键不是“监听是否进入视口”，而是“何时开始加载”： <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">rootMargin: "0px 0px 200px 0px"</code></div> 向下扩展 200px，让图片在用户滚动到它前就触发加载，避免滚动过快时白屏 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">threshold: 0.01</code></div> 表示只要 1% 面积可见即触发，比默认 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">0</code></div> 更早响应（尤其对小图） 务必在 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">observer.observe()</code></div> 前，把真实 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div> 存在 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">data-src</code></div> 里，而非直接写死在 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div> —— 否则未监听前就已发起请求 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove("lazy"); observer.unobserve(img); } }); }, { rootMargin: "0px 0px 200px 0px", threshold: 0.01 }); document.querySelectorAll("img.lazy").forEach(img => observer.observe(img));</code></div> 慎用 scroll 事件手动实现，性能代价高 用 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.addEventListener("scroll", ...)</code></div> + <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">getBoundingClientRect()</code></div> 判断位置，看似可控，实则极易引发性能问题： 立即学习 “ 前端免费学习笔记（深入） ”； Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 滚动时高频触发，若每次执行都调用 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">getBoundingClientRect()</code></div> ，会强制同步布局（layout thrashing） 没有节流时，Chrome DevTools 的 Rendering 面板常显示大量 “Layout” 黄条 移动端 touchmove 更敏感，卡顿更明显 无法感知 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">position: fixed</code></div> 容器内的滚动，或 iframe 内部滚动 除非你明确知道滚动容器是某个 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">overflow: auto</code></div> 的 div 且必须兼容 IE11，否则不要走这条路。 服务端配合：用 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Accept: image/webp</code></div> + <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">client-hints</code></div> 减少无效加载 懒加载只是推迟请求，不代表能省带宽。如果用户网络差、设备像素比高，却仍加载了 2x 大图，意义不大。这时需服务端参与： 开启 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Client-Hints</code></div> （如 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Sec-CH-DPR</code></div> , <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Sec-CH-Width</code></div> ），让服务器返回适配尺寸的图 利用 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Accept</code></div> 请求头判断是否支持 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">webp</code></div> ，后端动态替换 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div> 后缀（例如把 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.jpg</code></div> 改成 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.webp</code></div> ） CDN 层配置基于 User-Agent 的降级策略：iOS 14 以下不发 AVIF，Android 10 以下禁用 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">image/avif</code></div> 这些和懒加载不冲突，但单独做懒加载，相当于只系了安全带，没关油门。 真正难的不是“怎么让图片晚点加载”，而是“怎么确保它在该出现的时候刚好加载完，且加载的是对的图”。很多项目卡在 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">IntersectionObserver</code></div> 的 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">rootMargin</code></div> 设多少、 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">threshold</code></div> 取 0.01 还是 0.1、以及服务端能否及时响应 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Client-Hints</code></div> —— 这些细节才决定懒加载是提升体验，还是制造新的抖动。 </div> <!-- 文章导航 --> <nav class="jxgpc-article-nav" aria-label="文章导航"> <a href="http://www.jxgpc.com/pc/15523.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev"> <span>‹</span> <div> <div class="jxgpc-article-nav-label">上一篇</div> <div class="jxgpc-article-nav-title">可用jquery在div中添加标签吗</div> </div> </a> <a href="http://www.jxgpc.com/pc/15565.html" class="jxgpc-article-nav-link jxgpc-article-nav-next"> <div> <div class="jxgpc-article-nav-label">下一篇</div> <div class="jxgpc-article-nav-title">如何用数据属性和批量操作替代重复的 class 切换实现清爽过滤逻辑</div> </div> <span>›</span> </a> </nav> </div> </article> <!-- 相关文章列表 --> <section class="jxgpc-content-section" style="margin-top: 20px;"> <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2> <ul class="jxgpc-article-list"> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15523.html" class="jxgpc-article-link">可用jquery在div中添加标签吗</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15505.html" class="jxgpc-article-link">博客美化（三）：手机完美浏览博客 - 六月天空的芬芳</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15488.html" class="jxgpc-article-link">html插入的图片怎么运行看不了_解html图片运行不显问题【技巧】</a> <div class="jxgpc-article-meta">2026-09-29</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15482.html" class="jxgpc-article-link">怎么实现水平方向中间对齐？_html/css_WEB-ITnose</a> <div class="jxgpc-article-meta">2026-09-29</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15426.html" class="jxgpc-article-link">HTML中caption表格标题 HTML中caption标签对齐方式</a> <div class="jxgpc-article-meta">2026-09-29</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15368.html" class="jxgpc-article-link">html5用的什么语言</a> <div class="jxgpc-article-meta">2026-09-29</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15268.html" class="jxgpc-article-link">HTML函数能否在无风扇迷你主机开发_迷你PC适用性评估【汇总】</a> <div class="jxgpc-article-meta">2026-09-29</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15565.html" class="jxgpc-article-link">如何用数据属性和批量操作替代重复的 class 切换实现清爽过滤逻辑</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15568.html" class="jxgpc-article-link">网站开发中HTML怎么优化性能 HTML网页加载策略【建议】</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15571.html" class="jxgpc-article-link">HTML中noscript兼容方案 HTML中noscript标签在禁用JS时的作用</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> </ul> </section> </div> <!-- 右侧边栏 --> <aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏"> <!-- 推荐阅读 --> <div class="jxgpc-widget"> <h3 class="jxgpc-widget-title">推荐阅读</h3> <div class="jxgpc-recommend-grid"> <a href="http://www.jxgpc.com/pc/15571.html" class="jxgpc-recommend-item"> <div class="jxgpc-recommend-thumb"> <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="HTML中noscript兼容方案 HTML中noscript标签在禁用JS时的作用"> </div> <div class="jxgpc-recommend-title">HTML中noscript兼容方案 HTML中noscript标签在禁用JS时的作用</div> </a> <a href="http://www.jxgpc.com/pc/15568.html" class="jxgpc-recommend-item"> <div class="jxgpc-recommend-thumb"> <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="网站开发中HTML怎么优化性能 HTML网页加载策略【建议】"> </div> <div class="jxgpc-recommend-title">网站开发中HTML怎么优化性能 HTML网页加载策略【建议】</div> </a> <a href="http://www.jxgpc.com/pc/15565.html" class="jxgpc-recommend-item"> <div class="jxgpc-recommend-thumb"> <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="如何用数据属性和批量操作替代重复的 class 切换实现清爽过滤逻辑"> </div> <div class="jxgpc-recommend-title">如何用数据属性和批量操作替代重复的 class 切换实现清爽过滤逻辑</div> </a> <a href="http://www.jxgpc.com/pc/15559.html" class="jxgpc-recommend-item"> <div class="jxgpc-recommend-thumb"> <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="HTML5怎样实现图片懒加载_HTML5实现图片懒加载思路【性能】"> </div> <div class="jxgpc-recommend-title">HTML5怎样实现图片懒加载_HTML5实现图片懒加载思路【性能】</div> </a> </div> </div> <!-- 最新文章 --> <div class="jxgpc-widget"> <h3 class="jxgpc-widget-title">最新文章</h3> <ul class="jxgpc-article-list"> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15571.html" class="jxgpc-article-link">HTML中noscript兼容方案 HTML中noscript标签在禁用JS时的作用</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15568.html" class="jxgpc-article-link">网站开发中HTML怎么优化性能 HTML网页加载策略【建议】</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15565.html" class="jxgpc-article-link">如何用数据属性和批量操作替代重复的 class 切换实现清爽过滤逻辑</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15559.html" class="jxgpc-article-link">HTML5怎样实现图片懒加载_HTML5实现图片懒加载思路【性能】</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15534.html" class="jxgpc-article-link">CSS自定义浏览器滚动条样式完整代码</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> <li class="jxgpc-article-item"> <a href="http://www.jxgpc.com/pc/15527.html" class="jxgpc-article-link">10个经典的网页鼠标特效代码</a> <div class="jxgpc-article-meta">2026-09-30</div> </li> </ul> </div> <!-- 热门标签 --> <div class="jxgpc-widget"> <h3 class="jxgpc-widget-title">热门标签</h3> <div class="jxgpc-article-tag-list"> <a href="http://www.jxgpc.com/tag/13725" class="jxgpc-article-tag-item">ove</a> <a href="http://www.jxgpc.com/tag/4807" class="jxgpc-article-tag-item">懒加载</a> <a href="http://www.jxgpc.com/tag/3271" class="jxgpc-article-tag-item">cdn</a> <a href="http://www.jxgpc.com/tag/3036" class="jxgpc-article-tag-item">伪元素</a> <a href="http://www.jxgpc.com/tag/2387" class="jxgpc-article-tag-item">html5</a> <a href="http://www.jxgpc.com/tag/2336" class="jxgpc-article-tag-item">safari</a> <a href="http://www.jxgpc.com/tag/2134" class="jxgpc-article-tag-item">ssl</a> <a href="http://www.jxgpc.com/tag/2113" class="jxgpc-article-tag-item">后端</a> <a href="http://www.jxgpc.com/tag/1705" class="jxgpc-article-tag-item">android</a> <a href="http://www.jxgpc.com/tag/1682" class="jxgpc-article-tag-item">浏览器</a> <a href="http://www.jxgpc.com/tag/1596" class="jxgpc-article-tag-item">html</a> <a href="http://www.jxgpc.com/tag/1593" class="jxgpc-article-tag-item">win</a> <a href="http://www.jxgpc.com/tag/1591" class="jxgpc-article-tag-item">ios</a> </div> </div> </aside> </div> </div> </main> <!-- 页脚 --> <footer class="jxgpc-footer"> <div class="jxgpc-container"> <div class="jxgpc-footer-links" style="justify-content: center;"> <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a> <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a> <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a> <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a> <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a> </div> <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;"> Copyright 2026 极星编程网 版权所有 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a> </div> <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div> </div> </footer> <!-- 返回顶部按钮 --> <button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button> <!-- 公共脚本 --> <script src="http://www.jxgpc.com/static/v3/js/common.js"></script> <div class="hide"> </div> </body> </html>
