原生loading="lazy"是最直接的非js懒加载方案，现代浏览器（chrome 76+等）原生支持，仅对视口外且具明确宽高的和生效，不支持background-image或内的。
原生 loading 属性是最直接的非 JS 懒加载方案
现代浏览器（Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+）已原生支持 img 和 iframe 的 loading 属性，无需任何 JavaScript 即可触发懒加载行为。它不是“模拟”，而是由浏览器内核原生实现的资源调度策略。
关键点在于：loading="lazy" 表示延迟加载，loading="eager" 强制立即加载（默认值），而未设置该属性时行为取决于浏览器策略（通常等同于 eager）。
-
loading="lazy"对img有效，但仅当图片在视口外且满足滚动容器约束（如不在overflow: hidden的父元素内）时才真正延迟 -
iframe的loading="lazy"支持更严格：仅对src为跨域或非首屏 iframe 生效，且部分浏览器会忽略内联srcdoc的懒加载 - 不支持
background-image、picture内的source、或 CSS 中的图片引用——这些必须靠 JS 或服务端响应式处理 - 若页面存在大量
loading="lazy"图片但用户快速滚动，部分浏览器（如旧版 Chrome）可能因预加载阈值未触发而出现短暂空白，建议配合decoding="async"减少解码阻塞
IntersectionObserver 不是“非脚本方案”，但常被误当作替代
看到有人用 IntersectionObserver 实现懒加载就以为“没写逻辑脚本”，其实这是典型的误解。IntersectionObserver 是 JavaScript API，哪怕只写一行 new IntersectionObserver(...)，也属于脚本驱动方案，不符合“非脚本”前提。
它的存在反而凸显了原生 loading 的价值：省去监听、判断、替换 src、处理 srcset、兼容低版本等一整套 JS 工程逻辑。
- 如果你在 HTML 中写了
<script>new IntersectionObserver(...)</script>，那就已经引入了脚本依赖，不再属于“非脚本实现”范畴 - 服务端渲染（SSR）场景下，JS 懒加载还面临首次内容不可见、SEO 抓取不一致等问题，而原生
loading属于声明式标记，对爬虫透明 - 某些 CMS 或静态站点生成器（如 Jekyll、Hugo）提供插件自动注入
loading="lazy"，这仍是 HTML 层面生效，不等于“用了 JS”
服务端配合能补足原生 loading 的短板
原生懒加载只管“何时请求”，不管“请求什么”。比如响应式图片需要根据设备宽度返回合适尺寸，这就得靠服务端配合——否则即使 loading="lazy" 延迟了请求，仍可能拉取了过大的图。
核心思路是：让 HTML 中的 img 标签本身具备响应能力，浏览器基于当前环境自主选择资源，而非靠 JS 判断后改写 src。
- 必须使用
srcset+sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw" loading="lazy"> - 避免只写
srcset不写sizes：没有sizes，浏览器无法预估显示宽高，可能退化为加载最大图 - CDN 或图床支持
Accept-CH（Client Hints）时，可结合服务端根据Viewport-Width等 Header 返回适配图，此时 HTML 中甚至可只保留一个src，但需确保服务器正确配置和降级逻辑
容易被忽略的兼容性与回退陷阱
说“非脚本懒加载”，很多人默认“只要加个属性就行”，结果在 Safari 15.3 或微信内置浏览器（X5 内核）里发现完全不生效——这是因为这些环境压根不支持 loading 属性，也不会静默忽略，而是直接按 eager 加载。
- 不能依赖 UA 检测来动态加属性：那又绕回 JS；正确做法是服务端根据已知客户端能力表（如 caniuse 数据）决定是否输出
loading="lazy" - 对不支持的环境，唯一安全回退是不做任何处理——即保持默认 eager 加载，而不是试图用
data-src+ JS 补救，否则破坏“非脚本”前提 -
loading="lazy"在打印预览、阅读模式、或某些屏幕阅读器上下文中可能被忽略，这不是 bug，是设计使然：这些场景优先保障内容完整性而非性能 - 测试时别只看 Network 面板“有没有发请求”，要确认是否真在滚动到视口附近才发起——有些浏览器会在页面加载后预加载几屏内的 lazy 图片，这属于正常优化行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
