预加载 html 中的图像会发出警告消息

使用预加载要在页面中使用的图像link preload

<link rel="preload" href="http://shmdhussain.github.io/WebTest/test_img/blue.png" crossorigin="anonymous" as="image">

但在浏览器中收到警告

https://img4.mukewang.com/64edc377000196ca16100060.jpg

找到“ https://shmdhussain.github.io/WebTest/test_img/blue.png ”的预加载,但未使用,因为请求凭据模式不匹配。考虑查看跨域属性。

我希望它能工作,但我看到同一资源(图像)有两次下载

请参阅此演示https://hussain-test.glitch.me/,打开控制台查看警告,提前感谢您的帮助。

<!DOCTYPE html>

<html>

<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>


DIEA
浏览 131回答 1
1回答

侃侃无极

预加载图像时无需使用跨域!镜像不需要CORS只需删除跨域即可使用 crossorigin,您将看到一次失败的预加载和一次成功的加载
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5