$（document）.ready（）もCSS対応ですか？

$（document）.ready（）でスクリプトを実行していますが、これはレイアウト内のブロック要素を垂直方向に揃えるためのものです。 90％の時間、それは問題なく動作します。しかし、2つのうちの1つが発生し、余分な10％：

それがセンタリングを行うために要する時間の明らかな遅れがあります、とブロック要素は、所定の位置にジャンプします。これは単にパフォーマンスに関連している可能性があります。ページのサイズはしばしば大きく、一度に実行されるJavaScriptの量がかなり多いためです。
センタリングが完全に台無しになり、ブロック要素があまりにも遠くまで押し込まれるか、十分に遠くに押し込まれます。あたかも高さを計算しようとしたように見えますが、不適切な測定が行われていました。

DOM-readyでスクリプトを実行しても、正しいCSS値がすべてDOMに注入されていない理由はありますか？（すべてのCSSは<link>で<head>にあります）。

(function ($) { 
    // VERTICALLY ALIGN FUNCTION 
    $.fn.vAlign = function() { 
     return this.each(function(i) { 
     var ah = $(this).height(); 
     var ph = $(this).parent().height(); 
     var mh = (ph - ah)/2; 
     $(this).css('margin-top', mh); 
     }); 
    }; 
    })(jQuery);

ありがとう：

はまた、ここでの問題（はい、それはhereからまっすぐに取られています）を引き起こしているスクリプトです。

出典

2009-08-24 Bryan M.

画像が含まれていますか？スタイルが計算された後でも、イメージの読み込みによって再レイアウトが発生する可能性があります。今日いくつかのテストをしながら – sam

：

レディ（）メソッドは、もはやすべてのスタイルシートがロードされるのを待っについていかなる保証をするためにしようとします。代わりに、すべてのCSSファイルは、ページ上のスクリプトの前に含める必要があります。 ready(fn) documentationからMore Information

：

注：すべてのスタイルシートは、あなたのスクリプトの前に含まれていることを確認してください（特にレディ機能を呼び出すもの）。これにより、jQueryコードの実行が開始される前に、すべての要素のプロパティが正しく定義されていることが確認されます。これを行わないと、特にWebKitベースのSafariなどのブラウザで散発的な問題が発生します。

上記でも実際にが CSSのレンダリングに関するものではありませんので、ときready()キックであなたはまだ画面の変更を見ることができる。しかし、それは問題からあなたを保存する必要があります。ことに注意してください

実際、JSの上にCSSを置くだけですべての問題が解決するのはちょっと奇妙です。 CSSが非同期に読み込まれるため、CSSがまだダウンロードされている間に、JSローディングはを開始し、を終了することができます。したがって、上記の解決策がある場合、を実行すると、以前のすべての要求が完了するまでJSコードが停止されますか？

私はいくつかのテストを行いましたが、実際には時々 JSはCSSが読み込まれるまで遅れています。理由を知らないのは、JSのダウンロードが完了してからCSSがダウンロードを完了したことを示すためです。

some HTMLとits results（これには10秒の遅延があります）のJS Binを参照してください。its waterfall resultsのwebpagetest.orgを参照してください。これは、スティーブ・スーダーズのcuzillion.comのスクリプトを使用して遅い応答を模倣しています。滝では、resource.cgiへの参照はCSSです。そのため、Internet Explorerでは、CSSが要求された直後に最初の外部JSがロードされ始めます（ただし、CSSの終了にはさらに10秒かかります）。二JSのダウンロードが開始されていないことをjQueryの、showsを取得した後、第二の外部JSと

<link rel="stylesheet" type="text/css" href=".../a script that delays.cgi" /> 

<script type="text/javascript" src=".../jquery.min.js"></script> 

<script type="text/javascript"> 
    alert("start after the CSS has fully loaded"); 
    $(document).ready(function() { 
    $("p").addClass("sleepcgi"); 
    alert("ready"); 
    });   
</script>

Waterfall with a single external JS script

Another test：CSSが同様に読み込みが完了するまで、しかし、第二<script>タグが実行されませんCSSがロードされるまでここでは、resource.cgiへの最初の参照はCSSで、二JS：

Waterfall with two external JS scripts

は、スタイルシートを移動すると、すべて下回る（ready機能を含む）JSはかなり早い時期に実行されることを示しているが、でも確かにJS JS実行時に未知のjQuery適用クラスがSafariとFirefoxのクイックテストで正しく使用されています。しかし、$(this).height()のようなものは、その時に間違った値をもたらすことになります。

しかし、additional testingは、それが先に定義されたCSSがロードされるまでJSが停止され、一般的なルールではありませんことを示しています。外部JSとCSSを使用することといくつかの組み合わせがあるようです。私はこの仕組みが分からない。

最終ノート：裸のURLから実行したときJSビンは、各スクリプトでGoogleアナリティクスを含んでいるとして（のようなjsbin.com/aqeno、試験結果は、実際にJSビンによって変更されている...それは編集URL上の[出力]タブと思われますjsbin.com/aqeno/editのような追加のGoogle Analyticsのものは含まれておらず、別の結果が得られるはずですが、そのURLはwebpagetest.orgでテストするのが難しいです。多くの質問が残りました... Steve SoudersのIE8 Parallel Script Loadingももっと複雑になります（上記の滝はIE7を使用して作成されています）

たぶん、リリースノートとドキュメントを信じるべきです...

出典

2009-08-24 20:54:20 Arjan

Cuzillion（http://stevesouders.com/cuzillion/）は、さまざまな種類のオブジェクトがさまざまなブラウザにどのように読み込まれているかを理解するのに役立ちます。 – strager

+1の深さです。尊敬。 – annakata

...しかしそれはまだ決まった答えではありません**。物事が ''や ''であれば問題になるかもしれませんか？ IE8で* StylesheetsブロックのダウンロードをFirefoxとJavaScriptで実行する*（他のブラウザはどうですか？）* IE8 Parallel Script Loading *この垂直配置スクリプトでは、多くの問題が発生することがあります。ところで、IE8の後者のための滝はhttp://www.webpagetest.org/result/090825_24AP/には表示されず、IE7のように見えます。http://www.webpagetest.org/result/090825_24AQ/ – Arjan

すべてのDOMノードが使用可能になると、DOMレディが起動します。それはCSSとは関係ありません。前にスタイルを配置してみるか、別の方法で読み込んでみてください。

出典

2009-08-24 20:34:28 fphilipe

私の知る限り、準備完了イベントはDOMロード時に発生します。つまり、すべてのブロックリクエスト（JS）がロードされ、DOMツリーが完全にグラフ化されています。 IEの準備完了状態は、ほとんどの他のブラウザより遅いイベントトリガ（document.readyStateの変更対DOMContentLoaded）に依存しているため、タイミングもブラウザに依存しています。

非ブロックリクエスト（CSSやイメージなど）の存在は、完全に非同期であり、レディ状態とは無関係です。そのようなリソースが必要な位置にいる場合は、古い古いonloadイベントに依存する必要があります。 1.3 release notesから

出典

2009-08-24 20:40:27 annakata

は私が何とかダウンロードCSSは（ない 'ready'関数自体を発射するためのいくつかの次の' '

HTML5によると、DOMContentLoadedは考慮にスタイルシートを取ることなく、プレーンDOM readyイベントです。しかし、HTML5解析アルゴリズムでは、すべての以前のスタイルシートが読み込まれるまで、ブラウザの実行を延期する必要があります。 IEとFirefoxはスタイルシートが

Webkitのが唯一の外部スクリプト（<script src>）

Operaはブロックしなかったため、その後の実行をブロックされたロードまで、後続のすべてのスクリプトの実行をブロックし

（DOMContentLoaded and stylesheets）molily's tests (2010)で

、任意のスクリプトの実行以降の

All modern browsers now support DOMContentLoaded（2017）ですので、これまでにこの動作を標準化している可能性があります。

出典

2013-10-06 21:27:24 sam

$（document）.ready（）もCSS対応ですか？

答えて

関連する問題