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

【问题标题】：How to know when a dynamically loaded CSS file is fully loaded and active?如何知道动态加载的 CSS 文件何时完全加载并处于活动状态？
【发布时间】：2012-04-13 04:19:52
【问题描述】：

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

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

【问题讨论】：

还有一点：我更喜欢非 Ajax（非 XHR）方法，也不要使用任何 JavaScript 库，除非没有其他方法。
这是否意味着您不必支持任何旧版浏览器？
我只需要支持现代浏览器。

标签： javascript css lazy-loading

【解决方案1】：

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

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

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

img.src = url;

【讨论】：

【解决方案2】：

试试like this

(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');

}());

【讨论】：

我已经尝试过 jsFiddle，但它似乎在 Chrome (17) 和 IE 9 中不起作用。我认为这些浏览器实际上不支持（动态）链接元素上的 onload 事件.我认为至少 IE 需要 onreadystatechange 事件。我在问题 (github.com/LukeTheDuke/Lazyloader/blob/master/lazyloader.js) 中提到的惰性加载程序同时使用 onload 和 onreadystatechange。