web-dev-qa-db-ja.com

$（window）.loadと$（document）.readyの違いは何ですか？

私は最近JavaScriptコードに問題があり、$(document).ready()からコードの一部を取り出して$(window).load()に入れることで問題を修正しました。

今、私は_window.load_が_document.ready_の直後に起動されることを理解していますが、なぜ_document.ready_の後、つまりwindow.load()の後に準備ができていないのですか？

javascriptjquerydocument-ready
67
Mark McCook

loadは、画像を含むすべてのアセットの読み込みが完了すると呼び出されます。 readyは、DOMがインタラクションの準備ができると起動されます。

MDCから、window.onload （：

ロードイベントは、ドキュメントのロードプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトがDOMにあり、すべての画像とサブフレームの読み込みが完了しています。

JQuery APIドキュメントから、。ready（handler）：

JavaScriptはページのレンダリング時にコードを実行するためのロードイベントを提供しますが、画像などのすべてのアセットが完全に受信されるまで、このイベントはトリガーされません。ほとんどの場合、DOM階層が完全に構築されるとすぐにスクリプトを実行できます。 .ready（）に渡されたハンドラーは、DOMの準備が完了した後に実行されることが保証されているため、通常は他のすべてのイベントハンドラーをアタッチして他のjQueryコードを実行するのに最適な場所です。 CSSスタイルプロパティの値に依存するスクリプトを使用する場合、スクリプトを参照する前に外部スタイルシートを参照するか、スタイル要素を埋め込むことが重要です。

73
Martin Jespersen

$(document).ready()は、ページのDOMを操作する準備ができていることを意味します。

window.load()は、ページ全体（CSSや画像ファイルなどのコンポーネントを含む）が完全にロードされるとトリガーされます。

何を達成しようとしていますか？

26
Mario Fink
_$(document).ready(function(){
//code here
});
_

上記のコードは、jQueryを扱うときにほぼ毎回使用されます。

このコードは、DOMの準備ができた後にjQueryコードを初期化するときに使用されます。

_$(window).load()
_

画像を操作したい場合があります。たとえば、画像を垂直方向と水平方向に揃えたい場合、そのためには画像の幅と高さを取得する必要があります。 $(document).ready()を使用すると、訪問者が既にイメージをロードしていない場合、それを行うことができません。その場合、イメージのロードが完了したときにjqueryアライメント関数を初期化する必要があります。そこで$(window).load()を使用します

8
SimonGates

$(document).readyは、DOMのロード時に発生するjQueryイベントであるため、ドキュメント構造の準備ができたときに発生します。

$(window).loadイベントは、コンテンツ全体（CSS、画像などを含む）が読み込まれた後に発生します。

これは大きな違いです。

6
Bharat Chodvadiya

$(document).ready()は、DOMを_<body>...</body>_でラップします

$(window).load()はドキュメントのパパであり、すべてのDOMを_<html>...</html>_でラップします

レンダー処理を保存するためにあなたのケースで使用しましょう。

4
xicooc

簡単に言えば、window.loadは、ウィンドウのすべてのコンテンツがロードされるときに呼び出されますが、document.readyは、DOMがロードされ、ドキュメント構造の準備ができたときに呼び出されます。

2
Yamini Upadhyay

  1. $（document）.readyは、$（window）.loadイベントに比べてスライダーが速いです。

  2. Domがロードされると$（document）.readyが起動しますが、Dom、css、および画像が完全にロードされると$（window）.loadイベントが起動します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
  <script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
    <script> 
        $(window).load(function () {          
            var img = $('#img1');
      alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());          
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">     
    <div>
        <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
    </div>
    </form>
</body>
</html>
1
ankit sahu

ロード状態は、ウィンドウオブジェクトが作成され、DOMを含むすべての必要なコンポーネントがメモリにロードされたが、同じページをレンダリングするためにレンダリングエンジンに渡されていない状態です。

一方、準備完了状態では、DOM要素、イベント、およびその他の依存コンポーネントがレンダリングエンジンに渡され、ページにレンダリングされ、対話と操作の準備ができていることが確認されます。

1
asmitB