html如何实现图片懒加载_html网页性能优化技巧-html教程-PHP中文网

原生 loading="lazy" 可开箱即用，仅支持 img/iframe 与 http(s) 图片；intersectionobserver 更灵活但需手动管理 data-src；响应式懒加载须配合 srcset/sizes 与 fallback src；第三方库需防 class 冲突和冗余 polyfill。

html如何实现图片懒加载_html网页性能优化技巧

img 标签加 loading="lazy" 就能开箱即用

现代浏览器（Chrome 76+、Firefox 75+、Edge 79+）原生支持 loading="lazy"，无需 JS 就能对非视口内图片做懒加载。它只对 <img> 和 <iframe></iframe> 生效，且仅适用于常规 HTTP(S) 图片（不支持 data URL 或 blob URL）。

常见错误是把它加在背景图或通过 CSS background-image 加载的图片上——这完全无效，因为 loading 是 HTML 属性，只作用于 HTML 元素本身。

使用时直接写：

@@##@@

注意：loading="eager" 是显式关闭懒加载（默认行为），一般不用写；loading="auto" 是规范预留值，目前等同于未设置，各浏览器按默认策略处理。

IntersectionObserver 是更可控的 JS 懒加载方案

当需要兼容老浏览器、动态插入图片、或配合占位图/渐入动画时，IntersectionObserver 是首选。它比监听 scroll 事件性能好得多，不会触发强制同步布局。

关键点：

观察器创建后，需主动调用 observe() 注册每个 <img src="photo.jpg" alt="示例" loading="lazy"> 元素，不能只 observe 一次父容器就自动覆盖所有子图
图片真实地址应存在自定义属性（如 data-src），避免初始请求；加载完成后把值赋给 src，再移除 data-src 防止重复加载
务必检查 img.complete，防止图片已缓存完成但 observer 还没触发回调，导致 src 被清空或重复赋值

简易实现片段：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

const io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      if (img.dataset.src && !img.src) {
        img.src = img.dataset.src;
        img.dataset.src = '';
      }
      io.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));

懒加载和 srcset / sizes 一起用才真正适配多设备

只加 loading="lazy" 不解决响应式图片问题。如果图片在移动端本该加载小图，却因懒加载延迟而错失 srcset 的媒体查询判断时机，可能仍拉取大图。

正确做法是：把 srcset 和 sizes 和 loading="lazy" 同时写在标签里，浏览器会在懒加载触发时，根据当前视口宽度 + sizes 计算结果，再从 srcset 中选最匹配的资源。

例如：

@@##@@

注意：src 是 fallback，必须提供一个基础图（即使很小），否则 Safari 等浏览器在某些懒加载时机下可能不触发 srcset 解析。

第三方库如 lazysizes 要小心 class 冲突和 polyfill 体积

lazysizes 仍是常用选择，尤其要支持 IE11 或需要自动处理 picture、iframe、video poster 时。但它默认依赖 class="lazyload" 触发，若项目已有同名 class 用于其他目的（比如 CSS 动画开关），就会误触发或漏加载。

使用前建议：

重命名触发 class，通过 data-class 或初始化时传 lazyClass 配置项
确认是否真需要完整版：纯 <img> 场景下，手动用 IntersectionObserver 只需 20 行代码，而 lazysizes min+gzip 后仍有 ~5KB
不要无脑引入 polyfill：若目标用户基本是 Chrome/Firefox/Edge 新版本，IntersectionObserver 原生支持率已超 97%，polyfill 可省则省

另外，Webpack/Vite 用户要注意：如果图片路径走构建工具处理（如 import logo from './logo.png'），懒加载逻辑必须和模块解析时机对齐，否则 data-src 可能还是相对路径，导致 404。