web-dev-qa-db-ja.com

jQueryを使用してCSSを非同期でロードする方法は？

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にのみ問題があります。

より良い解決策を知っていますか？

jquerycssjquery-uiasynchronous
20
Adam Lukaszczyk

これはIEで動作するはずです。

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

これは、非同期スタイルシートをロードするためのメソッドであり、ページのレンダリングをブロックしないそれは私のために働きました：

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);
42
Dmitry Pashkevich

安全な方法は古い方法です...

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

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ファイルを明示的にサポートしても意味がありません。

10
Hendy Irawan

に従って 動的にCSSスタイルシートをロードすることはIEでは機能しません ：

最後に、リンクelemがヘッドに追加された後にのみ、href属性を設定する必要があります。

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

ここでのどのソリューションも実際には、ページのレンダリングをブロックせずにCSSファイルをロードしません。これは通常、「非同期」が意味するものです。 （ブラウザーが何かを待っていて、ユーザーがページを操作できないようにしている場合、状況は定義上同期です。）

同期および非同期の読み込みの例はここにあります：

http://ajh.us/async-css

setTimeoutを使用して読み込みを延期すると効果があるようです。

0
Alan H.
jQuery(function(){

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

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