search

Nikaple / assets-retry

:repeat: Non-intrusive assets retry implementation. 无侵入式的静态资源自动重试
MIT License
303 stars 57 forks source link

IE10和IE11下css资源重试不生效 #106

Open 7UP-hue opened 2 months ago

7UP-hue commented 2 months ago

在IE浏览器使用时发现css资源加载失败时重试不生效

写了一个简单的demo测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.addEventListener('error', function (event) {
      console.log('load error');
      var target = event.target || event.srcElement;
      console.log(target);
    }, true)
  </script>
  <link rel="stylesheet" href="//test.com/xxx.css" crossorigin="anonymous">
  <script src="//test.com/xxx.js" ></script>
</head>
<body>
</body>
</html>

发现在chrome能够正常输出两个load error，但是在IE只能输出script的error。感觉像是link标签的error事件在IE监听不到？

Nikaple commented 1 month ago

IE在 <link> 设置了 crossorigin="anonymous" 之后，仍然不能获取样式表；并且在 CSS 加载失败的时候只有 load 事件，没有 error 事件，所以无法区分加载成功与失败。

目前只能想到一个比较绕的方法来解决：

  1. 先在link元素上设置检查flag

    <link
+ data-assets-retry-style-checker="sync"
type="text/css"
rel="stylesheet"
href="/e2e/fixture/styles/sync.css"
/>

  2. 在CSS文件中，为对应的link增加待检查样式（使用animation-name，因为里面可以存放任意符合要求的字符串）

    + link[data-assets-retry-style-checker="sync"] {
+   animation-name: sync;
+ }

    （上面两步可以通过打包插件实现）

  3. 在检测 CSS 是否加载成功时，对于包含 data-assets-retry-style-checker 的 <link> 元素，不使用 cssRules 来检测，而是检测 link 元素上 animation-name 的值是否正确