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 docs中所述，加载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。一些   历史可以在这张道场票中找到。

知道何时加载文件很重要，因为您可能只想要   一旦样式表有了，就抓住DOM元素的尺寸   加载。

有些人已经实施了一种寻找井的方法   已知样式应用于特定HTML元素以了解是否   样式表已加载。由于该解决方案的特殊性，它是   不是适合RequireJS的东西。知道什么时候   link元素已加载引用的文件将是最强大的   溶液

由于知道文件何时加载不可靠，因此不会   有意义的是明确支持RequireJS加载中的CSS文件，因为   由于浏览器行为，它将导致错误报告。

Answer 5

根据Dynamically loading css stylesheet doesn't work on IE：

你需要设置最后的href attr，并且只有在链接元素附加到头部后才能设置。

$("<link>")
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

Answer 6

jQuery(function(){

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

});

Answer 7

$.get("path.to.css",function(data){
    $("head").append("<style>"+data+"</style>");
});

Answer 8

这里没有任何解决方案实际加载CSS文件而不阻止页面呈现 - 这通常是“异步”的含义。（如果浏览器正在等待某些内容并阻止用户与页面交互，则情况是根据定义同步。）

可以在此处找到同步和异步加载的示例：

http://ajh.us/async-css

我发现使用setTimeout延迟加载似乎有所帮助。

如何使用jQuery异步加载CSS？

8 个答案: