img 的 loading 属性仅支持 lazy 和 eager 两个值，无优先级概念；它只控制加载时机而非速度，错误值如 "1" 或 "priority-high" 会被忽略并退化为 eager。
img 的 loading 属性只支持 lazy 和 eager，没有“优先级”概念
浏览器原生 loading 属性不接受数值、权重或类似 high/low 的优先级值。它只有两个合法取值：lazy（延迟加载）和 eager（立即加载，默认值）。所谓“设置优先级”，实际是误读规范 —— 你无法用这个属性控制“多快加载”，只能控制“何时开始加载”。
常见错误现象：eager 行为。
-
loading="eager"：图片在 HTML 解析时即触发请求，适合首屏关键图（如 banner、头像） -
loading="lazy"：仅当图片进入视口（或即将进入）时才发起请求，适合列表、画廊等非首屏内容 - 不设该属性等价于
loading="eager"，不是“默认懒加载”
哪些图片不能用 loading="lazy"
强行对某些图片加 loading="lazy" 可能导致布局抖动、FOUC 或功能异常，尤其在以下场景：
- 高度未固定的响应式图片（
height缺失且无 aspect-ratio 保护），懒加载后尺寸回填引发页面跳动 - CSS 背景图（
loading属性只作用于background-image无效） - 通过 JavaScript 动态插入的
- 使用
object-fit: cover但容器宽高比与图片不匹配时，loading="lazy"可能加剧渲染延迟感知
替代方案：用 IntersectionObserver 实现更精细的加载时机
如果真需要“分批次”“按距离视口远近”加载（比如离视口 500px 就预加载，200px 再解码），loading 属性做不到，得上 JS。
示例逻辑（不依赖框架）：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
}
});
}, { threshold: 0.01, rootMargin: '500px' }); // 提前 500px 触发
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
-
rootMargin: '500px'控制预加载距离，比原生loading="lazy"更可控 - 必须用
data-src存真实地址，初始src设为空或占位图，否则浏览器会提前加载 - 注意兼容性：
IntersectionObserver在 IE 中不可用，需 polyfill
服务端配合：HTTP/2 Server Push 或
想让某张图“比其他所有资源都先加载”，loading 属性完全无能为力。此时要靠网络层或预加载声明：
- 对首屏核心图，在 HTML head 中写：
，强制浏览器在解析 HTML 阶段就发起请求 - Server Push（HTTP/2）可由后端主动推送关键图片，但现代 CDN 和浏览器正逐步弃用该特性，慎用
- 不要对懒加载图同时加
preload—— 它会抵消懒加载效果，造成冗余请求
原生 loading 是粗粒度开关，不是调度器。真要控优先级，得组合使用 preload、fetchpriority（Chrome 109+ 支持，但仅限 ，且值只有 high/low/auto）、以及 JS 观察器 —— 而且三者行为在不同浏览器里仍有差异。别指望一个属性解决所有问题。
