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

How to know when a dynamically loaded CSS file is fully loaded and active?

本文关键字：加载 活动状态 何时 动态 何知道 CSS 文件      更新时间：2023-09-26

我使用了StackOverflow上的一篇文章中描述的技术，将CSS文件动态添加到HTML页面的HEAD标记中（使用JavaScript）。检查CSS文件是否已完全加载的方法（见同一篇文章）被其作者描述为"丑陋"，在我看来是；-）还有一篇帖子建议使用"懒惰加载程序"（请参阅该帖子中公认的答案），将跨浏览器问题考虑在内。尽管代码看起来不错，但对于手头的任务来说似乎相当复杂。

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

尝试类似的东西

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

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

相关文章：