jquery - 如何使用 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);