有什么方法来检测什么时候一个CSS文件已经完全加载？ [英] Is there any way to detect when a CSS file has been fully loaded?

问题描述

我已经测试了很多用于JavaScript和 CSS 的延迟加载器插入< script>和< link>标签加载文件。但是问题是，< link> 标签不会触发 onload 重新加载。我发现的唯一解决方法是设置 display：none; （在 CSS ）在一个dummy元素上，并轮询该元素以检查它是否已设置为display：none。但是，除了丑陋，当然只适用于单个 CSS 文件。

I've been testing a lot of lazy-loaders for JavaScript and CSS that insert <script> and <link> tags to load files. However the problem is, that <link> tags don't fire onload so it's difficult to detect when they're loaded. The only workaround I found for this is to set display: none; (in the CSS file that is to be loaded) on a dummy element and poll that element to check when it has been set to display: none. But that, apart from being ugly, of course only works for a single CSS file.

;是否有其他方法来检测 CSS 文件是否已加载？

So I was wondering; Is there any other way to detect if a CSS file has been loaded?

谢谢，
Lukas

Thanks, Lukas

-

PS：找到一个解决方案，它在这个页面的最底部。 （我是stackoverflow的新手，我相信答案应该在底部，但我认为它可以很容易监督，如果googleusers stuble在这个页面，所以我写了这个小笔记）

PS: Found a solution, it's at the very bottom of this page. (I'm new to stackoverflow and I'm sure the answer is supposed to be at the bottom, but I think it could easily be overseen if googleusers stuble upon this page, so I wrote this little note)

推荐答案

编辑：应该注意，浏览器对CSS文件上的onload事件的支持已经改进， 。它不完全支持，所以我下面的答案仍然有一些相关性。 这是一个兼容性图表，但不确定来源是多么合法。

edit: It should be noted that browser support for onload events on CSS files has improved since my original answer. It is not fully supported though, so my answer below still has some relevance. Here is a compatibility chart, not sure how legit the source is though.

好的，我终于找到了解决方案。

Ok, I finally found a solution.

这家伙 http://tugll.tugraz.at/96784/weblog/9080.html 插入链接标记和投票document.styleSheets [index] .rules，直到它不再未定义（其中index当然是新插入的文件的索引）。不幸的是，他的代码是buggy，只适用于Safari& FF。所以我修复了错误，添加了Opera和Internet Explorer的功能，甚至添加了一些功能，用于添加多个CSS和JS文件，以及1个最终回调（当所有文件加载时）在一个简单的lazyloader函数中。结果可以在这里找到：

This guy http://tugll.tugraz.at/96784/weblog/9080.html inserts link-tags and polls document.styleSheets[index].rules until it is no longer undefined (where index of course is the index of the newly inserted file). Unfortunately his code is buggy and only works with Safari & FF. So I fixed the bugs, added functionality for Opera and Internet Explorer and even added features for adding multiple CSS and JS files and 1 final callback (when all files are loaded) in a sweet and simple lazyloader-function. The result can be found here:

https：// github .com / LukasBombach / Lazyloader

这篇关于有什么方法来检测什么时候一个CSS文件已经完全加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！