使用
link preload
预加载要在页面中使用的图像
<link rel="preload" href="http://shmdhussain.github.io/WebTest/test_img/blue.png"
crossorigin="anonymous" as="image">
但在浏览器中收到警告为
找到“https://shmdhussain.github.io/WebTest/test_img/blue.png”的预加载,但未使用,因为请求凭据模式不匹配。考虑看看跨域属性。
我希望它能工作,但我看到同一资源(图像)有两次下载
查看此演示https://hussain-test.glitch.me/,打开控制台查看警告,提前感谢您的帮助。
<!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">
</p>
</body>
</html>
预加载图像时无需使用跨域!图片不需要CORS
只需删除跨域
使用跨域,您将看到一次失败的预加载和一次成功的加载
如果你使用 crossorigin="anonymous"
服务器响应必须有标头
Access-Control-Allow-Origin: *