javascript - 使用回调函数动态加载样式表

Question

我有这个简短的 JavaScript 函数可以动态加载 CSS 文件。但是我还不擅长 JavaScript，所以任何人都可以告诉我如何在成功加载 CSS 文件后创建回调函数...

function loadStyleSheet(url){
    if(document.createStyleSheet) {
        try {document.createStyleSheet(url);} catch (e) { }
    }
    else{
        var css;
        css         = document.createElement('link');
        css.rel     = 'stylesheet';
        css.type    = 'text/css';
        css.media   = "all";
        css.href    = url;
        document.getElementsByTagName("head")[0].appendChild(css);
    }
}

附言如果您知道我如何知道 CSS 文件加载是否失败。好吧，我会更加感谢你^_^

Answer 1

我不确定是否有防弹方法来检查样式表是否已加载。这主要取决于 CSS 是从同一个域加载还是从另一个域加载。

我用来检查 CSS 是否已加载的技巧是在 CSS 中添加(或使用)已知规则，如下所示:

• 示例规则:.foobar { display: none; }
• 在我的文档中添加一个元素:<span class="foobar"></span>
• 使用您使用的方法加载 CSS
• 使用 window.setTimeout() 定期轮询文档并检查是否span.foobar仍然可见。当它隐藏时，表示 CSS 已加载