loading="lazy"仅对和生效，需在视口外、有明确宽高且含src属性；局部滚动需intersectionobserver；原生方案无js依赖但兼容性受限，混用js库会失效。
HTML loading 属性怎么写才生效
直接加 loading="lazy" 不一定起作用——它只对 <img alt="HTML怎么设置图像懒加载_HTML loading lazy属性教程【性能】" > 和 <iframe></iframe> 生效，且仅当元素在视口外、有明确宽高（或 CSS 尺寸）时才会触发懒加载。
- 必须配合
src（不能只靠data-src）：浏览器需要知道真实资源地址才能按需发起请求 - 没有设置
width和height（或等效 CSS），部分浏览器（如旧版 Safari）会跳过懒加载，直接加载 -
loading="eager"是显式取消懒加载，适合首屏关键图；loading="auto"由浏览器决定（目前多数等同于eager）
为什么加了 loading="lazy" 还是全量加载
常见原因是滚动容器不是主视口——比如图片在 <div style="overflow-y: scroll"> 里，而 <code>loading 只监听根滚动容器（window），不感知局部滚动。
- 这种情况
loading完全无效，得用IntersectionObserver手动实现 - Chrome 128+ 开始支持
loading="lazy"在<iframe></iframe>中对嵌入内容生效，但<img alt="HTML怎么设置图像懒加载_HTML loading lazy属性教程【性能】" >仍不支持非根滚动上下文 - 服务端渲染（SSR）页面若未预设尺寸，CSS 加载延迟可能导致浏览器误判为“无尺寸”，放弃懒加载逻辑
loading="lazy" 和 JS 懒加载库的区别
原生 loading 是浏览器级行为，不依赖 JS，失败也不报错；JS 库（如 lozad.js）能控制更细粒度的时机和 fallback，但也引入执行开销和兼容风险。
- 原生方案无 JS 即可用，禁用 JS 时仍能按浏览器策略加载（虽然可能退化为全量）
- JS 方案可监听局部滚动、支持渐进增强（如低网速下提前加载）、可自定义占位图，但要处理
DOMContentLoaded前的图片闪现 - 两者混用会冲突：如果 JS 库已把
src替换为data-src，原生loading因找不到src直接忽略该元素
兼容性与降级建议
Firefox 75+、Chrome 76+、Edge 79+ 支持，Safari 15.4+ 开始支持 <img alt="HTML怎么设置图像懒加载_HTML loading lazy属性教程【性能】" >，但 iOS Safari 15.4–16.3 有 bug：无 height 时仍加载，有 height 反而不加载。
立即学习“前端免费学习笔记（深入）”；
- 必须提供
width/height属性（非 CSS）来保证 Safari 行为稳定 - 对老浏览器，可结合
srcset+sizes配合loading，避免小屏加载大图 - 不要依赖
loading实现核心功能（如图片必须可见才算完成），它只是性能优化信号，不是加载控制契约
真正麻烦的是那些动态插入的图片——DOM 创建后才加 loading="lazy"，浏览器不会重新评估，得手动触发 IntersectionObserver 或重设 src。
