Question

以下onload事件不会在IE11和Microsoft Edge 40中触发：

<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="preload" as="style" onload="this.rel = 'stylesheet';">

如果您为onload元素提供有效的<link>，rel="stylesheet"会触发：

<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet" onload="alert('this works')">

Internet Explorer / Edge上rel="preload"的有效后备解决方案是什么？

Answer 1

您还可以在下面添加另一个链接标签，这将成为不支持该链接的浏览器的后备：

<head>
  <link rel="preload" href="style.css" as="style">
  <link rel="stylesheet" href="style.css">
</head>

请注意，由于下一行将该文件用作样式表，因此不再需要onload="this.rel='stylesheet'"。对于指定文件，只有一个网络请求。

来源：Preload CSS file not supported on Firefox and Safari Mac

Answer 2

经过一番挖掘后，我找到了一个可以从Yoav Weiss's article检测rel="preload"的功能的解决方案：

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {
      console.error("That shouldn't have happened");
    }
  }
};

var linkSupportsPreload = DOMTokenListSupports(document.createElement("link").relList, "preload");
if (!linkSupportsPreload) {
  // Dynamically load the things that relied on preload.
}

onload="this.rel='stylesheet'"，如果它在IE / Edge中有效，那将是一个很好的后备。 Scott Jehl's loadCSS library has its own polyfill表示rel = preload。

所以我正在利用该解决方案的一部分将rel=preload更新为rel=stylesheet。

我的最终解决方案：

// `rel=preload` Polyfill for <link> elements
var DOMTokenListSupports = function (tokenList, token) {
    if (!tokenList || !tokenList.supports) {
        return;
    }
    try {
        return tokenList.supports(token);
    }
    catch (e) {
        if (e instanceof TypeError) {
            console.log("The DOMTokenList doesn't have a supported tokens list");
        }
        else {
            console.error("That shouldn't have happened");
        }
    }
};
var linkSupportsPreload = DOMTokenListSupports(document.createElement('link').relList, 'preload');
if (!linkSupportsPreload) {
    // Dynamically load the things that relied on preload.
    var links = document.getElementsByTagName('link');
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        // qualify links to those with rel=preload and as=style attrs
        if (link.rel === 'preload' && link.getAttribute('as') === 'style') {
            // prevent re-running on link
            link.setAttribute('rel', 'stylesheet');
        }
    }
}

<link />元素事件的onload不会触发IE11，IE的预加载回退

2 个答案: