如何使用jQuery异步加载CSS？

Question

我想使用jQuery异步加载文档的CSS.

我找到了这个示例,但这似乎在IE中不起作用:

<script type="text/javascript" src="/inc/body/jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('<link>', {
            rel: 'stylesheet',
            type: 'text/css',
            href: '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'
        }).appendTo('head');
        $.getScript("/inc/body/jquery/js/jquery-ui-1.8.10.custom.min.js", function(){
        });
    });
</script>

基本上我想加载jQuery UI所有其他数据,图像,样式等加载到页面.

这个$.getScript作品非常适合JS文件.唯一的问题是IE中的CSS.

你知道更好的解决方案吗？

Answer 1

这是一个异步样式表加载的方法,它不会阻止对我有用的页面呈现:

https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js

根据lonesomeday的答案减少了上面链接的代码示例

var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);

Answer 2

安全的方式是旧的方式......

var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);

Answer 3

这应该在IE中工作:

$("head").append("<link rel='stylesheet' type='text/css' href='/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css' />");

Answer 4

正如RequireJS文档中提到的,棘手的部分不在于加载CSS:

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

但是在知道何时/是否已成功加载CSS时,如在您的用例中"我希望在所有其他数据,图像,样式等加载后加载jQuery UI ".

理想情况下,RequireJS可以加载CSS文件作为依赖项.但是,知道何时加载CSS文件存在问题,特别是在从另一个域加载文件时的Gecko/Firefox中.在这个Dojo门票中可以找到一些历史记录.

知道何时加载文件很重要,因为您可能只想在样式表加载后获取DOM元素的尺寸.

有些人已经实现了一种方法,他们寻找一种众所周知的样式来应用于特定的HTML元素,以了解是否加载了样式表.由于该解决方案的特殊性,它不适合RequireJS.知道链接元素何时加载了引用的文件将是最强大的解决方案.

由于知道文件何时加载不可靠,因此在RequireJS加载中明确支持CSS文件没有意义,因为它会因浏览器行为而导致错误报告.