分阶段预加载图片需按资源重要性、用户行为和渲染时机分三阶段：首屏关键图用早期加载；交互后用new image()动态预载；非首屏必显图用软预加载。
分阶段预加载图片不是靠一个标签或一次操作就能完成的，而是要按资源重要性、用户行为路径和渲染时机，把加载动作拆到不同生命周期里——核心是“该什么时候加载哪张图”，而不是“怎么一次性全拉下来”。
首屏关键图用 <link rel="preload"> 在 HTML 解析早期触发
这是唯一能真正抢在 DOM 构建前发起请求的方式，适用于 banner、logo、登录框主图这类用户打开页面瞬间就该看到的资源。
-
as="image"必须写，否则浏览器当普通 fetch 处理，无法复用图片缓存策略 - 路径必须是绝对路径或根相对路径（如
/assets/hero.webp），不能依赖当前 HTML 所在目录推算 -
fetchpriority="high"对 Chrome 109+ 有效，能压过部分 CSS/JS 请求，但旧版忽略无副作用 - 别和
loading="lazy"同时用——逻辑冲突，浏览器可能直接忽略 preload
用户交互后预加载下一页图，用 new Image() 控制时机与并发
比如轮播图滑动到第 3 页时，立刻预加载第 4、5 页的图；或鼠标 hover 商品卡片时预载详情页大图。这时必须用 JS 主动控制，<link> 无法动态生成。
- 顺序不能错：先绑定
onload/onerror，再赋值src，否则缓存命中时事件不触发 - 检查
img.complete：为true说明已缓存，需立刻走成功逻辑 - 并发数要节制：浏览器通常只允许 6–8 个同域并发连接，批量预加载建议用 Promise 队列，每次最多 4 个
- 别把
new Image().src = url当一行写完——失败不可知，也无法 await
非首屏但确定会用的图，用 <img> + loading="eager" 做“软预加载”
比如折叠面板展开后必显示的图、Tab 切换后立即呈现的内容图。它们不属于首屏，但用户点击后不能等网络延迟——这时不用 JS 或 preload，而是靠浏览器原生 eager 加载机制。
-
loading="eager"是默认行为，显式写出更明确，且能避免被父级loading="lazy"继承影响 - 确保这些
<img>标签在 DOM 中位置靠前（比如放在<main></main>开头），浏览器解析到就会开始请求 - 不要加
display: none或visibility: hidden——部分浏览器会推迟 eager 加载，直到元素进入渲染流 - 配合
decoding="async"可防止解码阻塞主线程，但不影响下载时机
最容易被忽略的是阶段边界：preload 只管首屏，Image 对象负责运行时决策，eager img 承接中间态资源。混用或错配时机（比如给首屏图用 Image、给交互图用 preload）反而拖慢整体体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
