如何使用HTML5中Loading属性实现原生的图片懒加载并提升页面滚动性能-H5教程-PHP中文网

HTML5的loading属性仅作声明式提示，不支持自定义懒加载逻辑，适用于img和iframe元素，取值为lazy/eager/auto；需配合宽高或aspect-ratio防CLS，旧浏览器需IntersectionObserver降级。

如何使用html5中loading属性实现原生的图片懒加载并提升页面滚动性能

HTML5 的 loading 属性本身不支持“懒加载”逻辑的自定义控制，它只是一个声明式提示，浏览器根据自身策略（如滚动距离、设备性能、网络类型）决定是否延迟加载。它不能替代 JavaScript 懒加载库的功能，但能以零代码成本显著提升首屏性能和滚动流畅度——关键在于正确使用和合理兜底。

loading 属性的基本用法与取值

该属性仅适用于和元素，有两个有效值：

auto：由浏览器决定是否懒加载（默认行为，可省略）
lazy：明确建议浏览器延迟加载，通常在元素即将进入视口时才开始获取资源
eager：强制立即加载（适用于首屏关键图，如 logo、主图）

示例：

为什么它能提升滚动性能

原生懒加载从根源上减少初始页面的网络请求数量和解码开销：

非首屏图片不触发 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 控制）

一个安全可用的渐进增强写法

兼顾现代浏览器原生能力与旧环境兼容：

@@##@@

再配一段轻量 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 是浏览器层优化，不是魔法开关。用对场景、配好尺寸、做好降级，就能在不增加维护成本的前提下，让滚动更顺、首屏更快、用户体验更稳。