<link>
标签不会触发onload
事件,所以很难检测它们何时已经加载完成。我找到的唯一解决方法是在一个虚拟元素上设置display: none;
(在要加载的CSS文件中),并轮询该元素以检查它何时被设置为 display:none。但是,这种方法除了丑陋之外,当然只适用于单个CSS文件。所以我想知道:是否有其他方法可以检测CSS文件是否已加载完成?
<link>
标签不会触发onload
事件,所以很难检测它们何时已经加载完成。我找到的唯一解决方法是在一个虚拟元素上设置display: none;
(在要加载的CSS文件中),并轮询该元素以检查它何时被设置为 display:none。但是,这种方法除了丑陋之外,当然只适用于单个CSS文件。编辑:值得注意的是,自我初始回答以来,浏览器对CSS文件的onload事件的支持已经改进。尽管它还没有完全得到支持,但下面的答案仍然有一定的相关性。这里是一个兼容性图表,不确定这个来源的可靠性。
好的,我终于找到了解决方案。
这个人http://tugll.tugraz.at/96784/weblog/9080.html插入链接标签并轮询document.styleSheets[index].rules,直到它不再是undefined(其中index当然是新插入文件的索引)。不幸的是,他的代码有缺陷,只能在Safari和Firefox上运行。因此,我修复了错误,添加了Opera和Internet Explorer的功能,甚至添加了为添加多个CSS和JS文件以及1个最终回调(当所有文件都加载完成时)的特性。结果可以在这里找到:
onload
事件。var cssFile = document.createElement("link");
cssFile.setAttribute("rel", "stylesheet");
cssFile.setAttribute("type", "text/css");
// Add event listener
cssFile.onload = function(){ console.log('loaded'); }
cssFile.setAttribute("href", 'pathToYour.css');
document.getElementsByTagName("head")[0].appendChild(cssFile);
编辑:(由于可能不支持 WebKit)
因此,我更愿意推荐JQuery LOADER
$("a.button, input.button, button.button").Loader(
{
url: [
'core.css',
'theme.css',
'button.css'
],
success: function() {
$(this).button();
}
});
你可以查看LazyLoad JavaScript库。
LazyLoad是一个微小的(仅1,541字节压缩),无依赖的JavaScript库,可轻松按需加载外部JavaScript和CSS文件(此版本中新增)。它非常适合在页面余下内容加载完毕后或按需加载时快速、不显眼地加载大型外部脚本和样式表。
除了CSS支持,这个版本的LazyLoad还添加了对在支持此功能的浏览器中并行加载多个资源的支持。要并行加载多个资源,只需在单个LazyLoad调用中传递URL数组即可。
// Gecko和WebKit不支持链接节点上的onload事件,所以我们只能在短暂的延迟后完成并希望一切顺利。
- jAndy这是目前我发现的最简单和最好的解决方案,它完美地工作:
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = css_url;
head.appendChild(link);
var img = document.createElement('img');
document.body.appendChild(img);
img.onerror = img.onload = function() {
img.onerror = img.onload = null;
document.body.removeChild(img);
// do whatever you need to do when css loaded;
};
img.src = css_url;
<link rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
2 - 在页脚预加载js文件
<link rel="preload" as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js">
<link rel="preload" as="script" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link rel="preload" as="script" href="script.js">
</body>
标签前添加以下内容。<script>
/** load defer css - js*/
// defer css
var cssAll = document.querySelectorAll('[as="style"]');
for(i = 0; i < cssAll.length; i++){
if(cssAll[i].getAttribute("rel") == "preload"){
cssAll[i].setAttribute("rel", "stylesheet");
}
}
//defer js
var jsAll = document.querySelectorAll('[as="script"]');
if(!window.jQuery)
{
// load jquery lib
var script = document.createElement('script');
script.type = "text/javascript";
script.src = jsAll[0].getAttribute("href");
document.getElementsByTagName('head')[0].appendChild(script);
// load other lib after load jquery
script.onload = function () {
for(i = 1; i < jsAll.length; i++){
var jsNext = document.createElement('script');
jsNext.type = "text/javascript";
jsNext.src = jsAll[i].getAttribute("href");
document.getElementsByTagName('head')[0].appendChild(jsNext);
}
}
}
</script>
我在Firefox 57、Chrome 61和Yandex上进行了测试,但没有在Opera和IE上进行测试。
<link>
的文档中的最后一个段落,可以在FF版本9及以上以及Chrome 19及以上的浏览器中将加载事件附加到链接元素。IE和Safari没有被提及。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Supply
的脚本加载器,代码如下所示:
supply.listen('text/css', function(payload, filename) {
switch(filename) {
case: 'foo.css': {
// do something
break;
}
case: 'baseball.css': {
break;
}
// ...
}
});
supply.files({
stylesheet: [
'foo.css',
'baseball.css'
]
});
参考:SupplyJS
tailwindcss
的 CDN -> <script src="https://cdn.tailwindcss.com"></script>
。现在,我把它放在了 body 标签的最后,但是我想先加载 CSS,所以我只需要在 head 标签中添加上述脚本,在 body 加载之前就可以了。