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

这应该在 IE 中工作：

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

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

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 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 的东西。知道什么时候 链接元素已加载引用的文件将是最健壮的 解决方案。

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

Answer 5

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

您需要最后设置 href attr 并且仅在将链接 elem 附加到头部之后。

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

Answer 6

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

Answer 7

这里没有一个解决方案实际上是在不阻塞页面渲染的情况下加载 CSS 文件——这通常是“异步”的意思。 （如果浏览器正在等待某事并阻止用户与页面交互，则根据定义，这种情况是同步的。）

同步和异步加载的例子可以在这里找到：

http://ajh.us/async-css

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

Answer 8

这是一种异步样式表加载方法，它不会阻止页面呈现，它对我有用：

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