Internet explorer 加载到<;链接>;元素事件不存在';t在IE11上点火,为IE预加载回退

Internet explorer 加载到<;链接>;元素事件不存在';t在IE11上点火,为IE预加载回退,internet-explorer,internet-explorer-11,microsoft-edge,onload,preload,Internet Explorer,Internet Explorer 11,Microsoft Edge,Onload,Preload,IE11和Microsoft Edge 40中不会触发以下onload事件: 如果给元素一个有效的rel=“stylesheet”,则会触发onload: Internet Explorer/Edge上的rel=“preload”的有效回退解决方案是什么?经过一番挖掘,我找到了一个解决方案,可以从以下位置检测rel=“preload”: var-DOMTokenListSupports=函数(令牌列表,令牌){ 如果(!tokenList | |!tokenList.supports){

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

如果给
元素一个有效的
rel=“stylesheet”
,则会触发
onload


Internet Explorer/Edge上的
rel=“preload”
的有效回退解决方案是什么?

经过一番挖掘,我找到了一个解决方案,可以从以下位置检测
rel=“preload”

var-DOMTokenListSupports=函数(令牌列表,令牌){
如果(!tokenList | |!tokenList.supports){
返回;
}
试一试{
返回tokenList.supports(令牌);
}捕获(e){
if(e instanceof TypeError){
log(“DOMTokenList没有受支持的令牌列表”);
}否则{
错误(“那不应该发生”);
}
}
};
var linkSupportsPreload=DOMTokenListSupports(document.createElement(“link”).relList,“preload”);
如果(!linkSupportsPreload){
//动态加载依赖于预加载的东西。

}
您还可以在下面添加另一个链接标记,该标记将成为不支持它的浏览器的备用标记:

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

请注意,您不再需要
onload=“this.rel='stylesheet'”
,因为下一行将该文件用作样式表。指定文件将只有一个网络请求


来源:

FWIW-预加载正在为Edge开发,并将在将来某个时候发布-它永远不会出现在IE上,尽管IE已经死了,从开发角度来看。@TylerH是的,这是个好消息,但必须有某种回退解决方案来弥补差距:(在预加载属性之前没有此功能,因此回退是…等待文件。或者,您可以使用完全不同的体系结构,如ASP.NET页面或其他内容,并在始终重定向到或其他内容的登录页上提供各种页面所需的所有文件。另一种替代方法是精简站点的登录页,使内容不需要预加载;更精简的站点加载速度更快。@TylerH不使用预加载不是一个选项,我的目标是在保持兼容性的同时创造最佳性能。我需要的是一个polyfill for rel=preload.works很好,但出于某些原因IE11不会停止尝试重新加载css文件似乎是一个恶性循环…我添加了
link.setAttribute('onload','');
就在
link.setAttribute('rel','stylesheet')的正上方
这似乎是一个很好的解决方案!在支持预加载的浏览器中,浏览器解析两个css文件时有没有可能出现性能问题?@Paesano2000根据一些在Chrome中只加载了1个文件进行测试的人说,请参阅中的注释我会记住,确认这一点的注释是在20年做出的19所以事情可能已经改变了。我个人没有测试过这个。