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

Question

我有这个动态加载 CSS 文件的简短 JavaScript 函数。但是我还不擅长 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 已加载

Answer 2

将回调函数作为参数传递给函数，然后在加载样式表后调用它。

例如：

function myFunc() {
  alert("Hello, World");
}

loadStyleSheet("link/to/stylesheet.css", myFunc);

function loadStyleSheet(url, callback){
    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);
    }
    callback();
}

编辑

如果你想测试它是否正确加载了样式表，你必须使用AJAX。

Answer 3

我想我找到了问题的答案^_^ http://yepnopejs.com/

谢谢大家的帮助^_^

Answer 4

我认为最简单的方法是在加载时将标记附加到头部

$('<link rel="stylesheet" href="link.css" type="text/css" />').appendTo("head")
.each(function() { //little trick to create the callback function
    // I am the callback
});

^{P.S：它是一个 jQuery 解决方案。我没有注意到 JS & CSS 标签，但它仍然是一个很好的解决方案}