HTML5的loading属性仅作声明式提示，不支持自定义懒加载逻辑，适用于img和iframe元素，取值为lazy/eager/auto；需配合宽高或aspect-ratio防CLS，旧浏览器需IntersectionObserver降级。
HTML5 的 loading 属性本身不支持“懒加载”逻辑的自定义控制，它只是一个声明式提示，浏览器根据自身策略（如滚动距离、设备性能、网络类型）决定是否延迟加载。它不能替代 JavaScript 懒加载库的功能，但能以零代码成本显著提升首屏性能和滚动流畅度——关键在于正确使用和合理兜底。
loading 属性的基本用法与取值
该属性仅适用于 <img alt="如何使用HTML5中Loading属性实现原生的图片懒加载并提升页面滚动性能" > 和 <iframe></iframe> 元素，有两个有效值：
- auto：由浏览器决定是否懒加载（默认行为，可省略）
- lazy：明确建议浏览器延迟加载，通常在元素即将进入视口时才开始获取资源
- eager：强制立即加载（适用于首屏关键图，如 logo、主图）
示例：<img src="photo.jpg" loading="lazy" alt="风景照">
为什么它能提升滚动性能
原生懒加载从根源上减少初始页面的网络请求数量和解码开销：
- 非首屏图片不触发
src请求，节省带宽与 TCP 连接 - 避免大量图片同时解码导致主线程卡顿（尤其在中低端 Android 设备）
- 浏览器内部采用高效预判机制（如基于 scroll anchoring 和帧率反馈），比 JS 实现的 IntersectionObserver 更轻量、更早介入渲染流水线
必须配合的实践要点
单独加 loading="lazy" 不够，需注意以下细节才能真正生效并兼容：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
必须设置宽高（width/height）或 aspect-ratio：防止懒加载过程中图片加载后引起布局偏移（CLS）。推荐用
width和height属性（非 CSS），或现代写法style="aspect-ratio: 4/3;" -
慎用于首屏核心图像：如 banner 图、用户头像等，应设为
loading="eager"或直接省略该属性 -
兼容性兜底（重要）：Safari 直到 15.4 才支持，旧版 Chrome/Firefox 也有限制。建议搭配
IntersectionObserver或loading="lazy"+data-src的降级方案 -
不适用于背景图或 CSS 加载的图片：该属性只对 HTML 中的
src属性起作用，CSS 中的background-image需另寻方案（如媒体查询或 JS 控制）
一个安全可用的渐进增强写法
兼顾现代浏览器原生能力与旧环境兼容：
<img src="placeholder.svg"
loading="lazy"
style="max-width:90%" height="400"
alt="描述文字">
再配一段轻量 JS（仅在不支持 loading 时激活）：
if ('loading' in HTMLImageElement.prototype) {
// 原生支持，无需 JS
} else {
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
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));
}
原生 loading 是浏览器层优化，不是魔法开关。用对场景、配好尺寸、做好降级，就能在不增加维护成本的前提下，让滚动更顺、首屏更快、用户体验更稳。
