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

时间:2012-03-29 13:51:00

标签: javascript css lazy-loading

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

我的问题是:在我上次提到的帖子(以及浏览器技术方面的许多改进)一年多之后,是否有一种可靠的跨浏览器方式来检查动态加载的CSS文件是否已准备就绪使用?

2 个答案:

答案 0 :(得分:0)

尝试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');

}());​

答案 1 :(得分:0)

您可以通过使用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/