原生 loading="lazy" 并非加了就生效，需满足尺寸属性、无 transform/overflow 等限制、静态 html 渲染且不写在 上；首屏关键图必须显式设 loading="eager" 并配合 preload；定制化懒加载需用 intersectionobserver 替代。
loading="lazy"写了但图片还是全量加载？检查这几点
原生 loading="lazy" 不是“加了就生效”，它只对满足特定条件的 <img> 生效。常见失效场景包括：<img> 缺少 width 和 height（或未通过 CSS 设置 aspect-ratio），父容器用了 transform、overflow: hidden 或 will-change: transform，图片是 JS 动态插入（如 React map()、Vue v-for 渲染），或错把属性写在 <source></source> 上。
尤其注意：Safari（iOS 16.3 及更早）对尺寸缺失极其敏感，会直接降级为 eager 加载；Chrome 对 <table> 内部的 <code><img> 几乎不支持懒加载。
首屏关键图必须显式设 loading="eager"
Banner 主图、网站 Logo、用户头像、核心按钮图标这类首屏关键图，不能依赖默认行为——Chrome 默认 eager，但 Safari 可能跳过加载，导致白屏。必须同时满足两个条件：
-
loading="eager"显式写在<img>标签上 - 配
<link rel="preload" as="image" href="xxx">，且href必须和<img src>完全一致
禁止给 loading="lazy" 的图再 preload——逻辑冲突，触发重复请求。
想提前加载？放弃 loading="lazy"，改用 IntersectionObserver
原生 loading="lazy" 没有偏移配置项，浏览器内部用固定阈值（通常约 1250px 下方）。若需“离视口还有 200px 就加载”，必须换方案：
- HTML 写成：
<img src="data:image/svg+xml,%3Csvg%3E" style="max-width:90%" style="max-width:90%"> - JS 中用
IntersectionObserver监听，rootMargin: '200px'表示上下各扩展 200px - 回调里检查
entry.isIntersecting，加载后调用observer.unobserve(img)
别忘了：src 必须设占位图或空数据 URI，否则浏览器会立即发起请求。
响应式画廊不能只靠 loading="lazy"
loading="lazy" 不感知视口变化，也不响应 srcset 切换。小屏可能加载大图，滚动时还可能重复请求。真正可控的做法是：
- 把多尺寸地址存
data-srcset（如"small.jpg 480w, medium.jpg 768w"） - 配合
sizes属性（如sizes="(max-width: 768px) 100vw, 50vw"）告诉浏览器布局宽度 - 用
IntersectionObserver触发时，根据window.innerWidth * window.devicePixelRatio匹配最适源，再赋值给src和srcset
没 sizes，srcset 就是摆设；没 data-srcset + 手动匹配，loading="lazy" 在画廊里基本等于无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
