异步CSS加载器" loadCSS "
1年前
超过561天
温馨提示
本文最后更新于2023年05月11日，已超过561天没有更新，若内容或图片失效，请留言反馈。
以下文章来自机翻：
为什么要使用异步CSS加载器？
使用link[rel=stylesheet]或@import引用CSS样式表会导致浏览器在加载样式表时延迟页面呈现。当加载对页面的初始呈现不重要的样式表时，这种阻塞行为是不可取的。下面的模式允许我们异步地获取和应用CSS。如果需要，这个存储库还提供了一个单独的（可选的）JavaScript函数，用于动态加载样式表。
如何使用
作为一个主要的模式，我们建议从HTML加载异步CSS，如下所示：
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'; this.onload=null;">
这篇文章解释了为什么这种方法是最好的：https：//www.filamentgroup.com/lab/load—css—simpler/
这可能是所有你需要的！但如果你想从JavaScript函数加载CSS文件，请继续阅读...
使用loadCSS函数动态加载CSS
loadCSS.js文件公开了一个全局loadCSS函数，您可以在需要时调用该函数以编程方式加载CSS文件。这对于需要从脚本动态加载CSS的情况很方便。
loadCSS( "path/to/mystylesheet.css" );
上面的代码将在页面中找到的最后一个样式表或脚本之后插入一个新的CSS样式表link，并且该函数将返回对该link元素的引用，如果您希望稍后在脚本中引用它。多次调用loadCSS将按照调用顺序引用CSS文件，但请记住，它们可能会以与调用顺序不同的顺序完成加载。
函数API
loadCSS函数有3个可选参数。
before：默认情况下，loadCSS会尝试在页面中的所有CSS和JS之后注入样式表链接。但是，如果您希望在文档中有一个更具体的位置，例如在特定的样式表链接之前，您可以使用before参数指定一个特定的元素作为插入点。您的样式表将被插入到您指定的元素之前。例如，这里是如何通过简单地将id属性应用到您的script来完成的。
<head>
...
<script id="loadcss">
// load a CSS file just before the script element containing this code
loadCSS( "path/to/mystylesheet.css", document.getElementById("loadcss") );
</script>
...
</head>
media：您可以选择向media参数传递一个字符串，以设置样式表的media=""-默认值为all。
attributes：您也可以选择传递属性名称/属性值对的Object，以在样式表上设置。这可用于指定子资源完整性属性：
loadCSS(
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
null,
null,
{
"crossorigin": "anonymous",
"integrity": "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
}
);
使用与 onload
在一些浏览器中，对link元素的Onload事件支持是不稳定的，所以如果你需要添加一个onload回调函数，在你的页面上包含onloadCSS函数并使用onloadCSS函数：
var stylesheet = loadCSS( "path/to/mystylesheet.css" );
onloadCSS( stylesheet, function() {
console.log( "Stylesheet has loaded." );
});
浏览器支持
loadCSS模式尝试在任何支持JavaScript的浏览器中异步加载css文件。但是，某些较旧的浏览器（如Internet Explorer 8和更旧的浏览器）会在加载样式表时阻止呈现。这仅仅意味着样式表将像使用普通link元素引用它一样加载。
loadCSS库地址：https://github.com/filamentgroup/loadCSS
none
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
老Q
1年前 . LV.0
大佬，链接中的“小度在线”换下哦，我换域名了ilaoq.com???