是预加载关键商品图最直接有效的方式，需在中静态声明、指定as="image"和绝对路径，配合fetchpriority="high"提升优先级，仅适用于明确立即展示的主图或轮播首图，不支持srcset响应式匹配。
用 link rel="preload" 预加载关键商品图
预加载商品图最直接有效的方式，就是让浏览器在解析 HTML 时就提前发起图片请求，而不是等 img 标签渲染或 JS 执行后才开始下载。核心是用 <link rel="preload"> 告诉浏览器：“这张图马上要用，现在就去取”。
注意：它只触发下载，不触发解码和渲染，所以不会影响首屏绘制时间，但能显著缩短后续展示延迟。
- 必须指定
as="image"，否则浏览器无法复用资源（比如当成脚本缓存） - 推荐加上
fetchpriority="high"（Chrome 101+），对首屏商品主图优先调度 - 只对明确知道会立即展示的图使用，比如商品详情页的主图、轮播第一张；不要盲目预加载所有 SKU 图
-
href必须是绝对路径或根相对路径（如/images/shoe-main.jpg），不能是协议相对路径（//cdn...）或带查询参数的动态 URL（除非确定缓存策略可靠）
<link rel="preload" as="image" fetchpriority="high" href="/images/product-main.jpg">
避免预加载被忽略的三个常见原因
写了 link preload 却没看到网络请求？大概率掉进了这几个坑：
- 图片 URL 返回了非 200 状态码（比如 404 或 302 重定向），浏览器会静默丢弃该 preload
- 页面中已有相同 URL 的
img标签，且该标签已进入 DOM，部分浏览器（如旧版 Safari）可能跳过 preload 复用逻辑 - 用了
media属性但当前不匹配（例如media="(min-width: 768px)"而你在手机上测试），preload 就不会触发
验证方法：打开 DevTools → Network 标签页 → 刷新页面 → 筛选 type: Other 或直接搜图片文件名，确认请求出现在非常靠前的位置（通常在 HTML 解析阶段就发出）。
JS 动态插入图片时怎么配合预加载
很多商品页用 JS 渲染图片列表（比如分页加载、SKU 切换），此时静态 link preload 不够用，得靠 JS 主动触发。
- 对即将展示的下一张图（如用户滑到第二屏前），创建
link标签并插入head：const link = document.createElement('link');<br>link.rel = 'preload';<br>link.as = 'image';<br>link.href = '/images/product-detail-2.jpg';<br>document.head.appendChild(link); - 不要用
new Image().src = ...替代 —— 它会触发解码，占用主线程，且无法参与浏览器的资源优先级调度 - 如果图片 URL 含随机参数（如
?v=12345），确保服务端正确设置Cache-Control，否则每次都是新资源，预加载失效
和 loading="lazy" 冲突吗？
不冲突，但需分清职责：loading="lazy" 是懒加载（推迟加载非视口内图片），而 preload 是提前加载（加速关键图）。它们可以共存，但目标相反。
- 主图用
preload + loading="eager"（显式声明不懒加载） - 列表页第 2–5 张图可考虑
preload（用户极大概率滚动到），但第 6 张之后建议放弃预加载，改用原生懒加载 - 切记：不要给
loading="lazy"的img同时加preload，浏览器可能因策略冲突而忽略其中一项
真正容易被忽略的是响应式图片场景：如果你用 srcset 和 sizes，preload 只支持单个 href，没法自动匹配设备 DPR 或宽度。这时得根据 window.devicePixelRatio 和 matchMedia 手动计算要预加载的 URL，否则高 DPR 设备可能预加载了 1x 图，实际却渲染 2x 图——白忙一场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
