link rel="preload" 是最可靠、语义最清晰的HTML图片预加载方式，需指定as="image"、正确href路径及可选fetchpriority="high"；new Image()适合按需逻辑预加载；loading="lazy"和decoding="async"均不等于预加载。
link rel="preload" 是目前最可靠、语义最清晰的 HTML 图片预加载方式，其他所谓“HTML 自动预加载”都不存在——img 标签加 loading="eager" 或 decoding="async" 不等于预加载，只是不懒、不解码阻塞而已。
用 link rel="preload" 声明关键图片
这是浏览器原生支持、零 JS 依赖、优先级可控的预加载手段，只适用于你明确知道路径且必须首屏就用的图（比如 banner、登录头像、核心产品图）。
-
as="image"必须写，否则浏览器不会设置正确的请求头（如Accept: image/webp），也影响缓存复用 -
href路径是相对当前 HTML 文档位置解析的，比如 HTML 在/pages/home.html，那href="img/hero.webp"就要能从该路径访问到，别写成./img/hero.webp还把 HTML 放在根目录下 -
fetchpriority="high"只对 Chrome 109+ 有效，可显式提升请求优先级，但不能滥用——全设 high 等于没设 - 不支持动态值：
href里不能写${url}或{{item.src}}，它纯静态；服务端渲染时需提前注入真实路径
<link rel="preload" as="image" href="/assets/hero.webp" fetchpriority="high">
用 new Image() 在 JS 中按需触发预加载
适合有逻辑判断的场景：比如用户 hover 导航项后预加载下一页图，或根据 window.devicePixelRatio 选 @2x 版本。
- 创建后立刻赋
src就会发起请求，不需要append到 DOM - 监听
onload和onerror才能确认结果，失败不会抛异常，靠回调判断 - 避免在 for 循环里密集
new Image()：浏览器并发连接数有限（通常 6~8），建议加简单队列或节流 - 长期持有大量预加载
Image实例可能内存泄漏，尤其挂到全局或闭包里；不用时可设img.src = ''断开引用
const img = new Image();<br>img.onload = () => console.log('预加载完成');<br>img.onerror = () => console.error('预加载失败');<br>img.src = '/assets/detail-2x.jpg';
别把 loading="lazy" 当预加载用
这是最常踩的坑。加了 loading="lazy" 的图，哪怕在首屏，Chrome 也会推迟到滚动前约 500px 才发请求——完全违背“提前加载”的目的。
立即学习“前端免费学习笔记（深入）”；
-
loading="eager"是默认行为，显式写出来只是强调“不懒”，不是“提前” -
decoding="async"只控制解码是否阻塞主线程，和下载时机无关 - 用
display: none或 CSS 背景位移（background-position: -9999px）的方式已过时：它让图片随主文档同步加载，拖慢首屏，且无法控制优先级
真正要预加载，就得主动声明或主动发起请求。link rel="preload" 的路径准确性、new Image() 的错误处理、以及彻底分清 lazy/eager/preload 三者的边界，才是实际落地时最容易被跳过的细节。
