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);
    }
}

P.S。如果您对如何知道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＆amp; CSS标签，但仍然是一个很好的解决方案}

使用回调函数动态加载StyleSheet

4 个答案: