如何使用jQuery异步加载CSS？

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

我发现了这个示例，但这似乎在IE中不起作用：

  $(function(){ $('', { 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(){ }); });  

基本上我想在所有其他数据，图像，样式等加载到页面后加载jQuery UI 。

$.getScript适用于JS文件。 唯一的问题是IE中的CSS。

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

Answer 1

这应该在IE中工作：

 $("head").append(""); 

Answer 2

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

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 3

安全的方式是旧的方式……

 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 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文件没有意义，因为它会因浏览器行为而导致错误报告。

Answer 5

根据动态加载css样式表不适用于IE ：

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

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

Answer 6

 jQuery(function(){ jQuery('head').append('') }); 

Answer 7

 $.get("path.to.css",function(data){ $("head").append(""); }); 

Answer 8

这里没有任何解决方案实际上加载CSS文件而不阻止页面呈现 – 这通常是“异步”的意思。（如果浏览器正在等待某些事情并阻止用户与页面交互，那么情况就是定义同步。）

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

http://ajh.us/async-css

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