HTML中使用link preload预加载图片出现警告及重复下载问题求助

阿华AIGC实验室

2026-5-6

解决Preload图片跨域凭证不匹配引发的重复下载问题

你遇到的警告和图片重复下载问题，本质是预加载请求的跨域凭证模式与实际图片请求的模式不匹配。

问题原因

当你用<link rel="preload">预加载跨域图片时，设置了crossorigin="anonymous"，但页面里的<img>标签加载同一张图片时，默认的凭证模式是no-cors（跨域请求但不携带凭证）。这两种模式被浏览器判定为不同的请求，所以会重复下载资源，同时抛出那个关于凭证模式不匹配的警告。

解决方案

要让浏览器复用预加载的资源，必须保证预加载请求和实际资源请求的跨域凭证模式完全一致，这里有两种可行的方式：

方式一：给<img>标签添加相同的crossorigin属性
这是最稳妥的做法，让图片请求和预加载请求的凭证模式统一：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>HTML BolierPlate</title>
<link rel="preload" href="https://shmdhussain.github.io/WebTest/test_img/blue.png" crossorigin="anonymous" as="image">
<style>
.font32 { font-size: 32px }
</style>
</head>
<body>
Welcome to BoilerPlate!!!
<p>
<img src="https://shmdhussain.github.io/WebTest/test_img/blue.png" crossorigin="anonymous">
</p>
</body>
</html>

方式二：移除预加载标签的crossorigin属性
如果你的图片资源不需要跨域凭证，也可以去掉预加载标签里的crossorigin="anonymous"，让预加载请求使用默认的no-cors模式，和<img>标签的默认模式匹配。不过这种方式在部分浏览器中可能存在兼容性问题，更推荐第一种方式。