如何知道动态加载的CSS文件何时完全加载并处于活动状态？

Question

我使用了StackOverflow上的帖子中描述的技术，将CSS文件动态添加到HTML页面的HEAD标签（在JavaScript中）。 作者将检查CSS文件是否已完全加载的方法描述为“丑陋”（我认为是;-)； 另一篇文章建议使用“惰性加载器”（请参见已接受）。该帖子中的答案），其中考虑了跨浏览器的问题。 尽管代码看起来不错，但对于手头的任务而言似乎相当复杂。

我的问题是：我上次提到该帖子（以及浏览器技术的许多改进）已经一年多了，有没有一种可靠的，跨浏览器的方法来检查动态加载的CSS文件是否已准备好使用？

Answer 1

您可以通过使用img加载CSS文件来实现。

var img = document.createElement("img");

img.onerror = function()
{
    console.log("loaded");
}

img.src = url;

此处的更多信息： http : //www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/

Answer 2

尝试一些像这样的

(function() {
    function cssLoader(url) {
        var link = document.createElement("link");
        link.onload = function(){
            console.log('loaded');
        };
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("type", "text/css");
        link.setAttribute("href", url);
        document.getElementsByTagName("head")[0].appendChild(link)
    }

    cssLoader('http://jsfiddle.net/css/style.css');

}());​