71

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

window.loadが の直後に起動されることは理解できdocument.readyましたが、なぜ の後に 準備ができていないdocument.readyのwindow.load()でしょうか。

4

9 に答える 9

75

load画像を含むすべてのアセットの読み込みが完了すると呼び出されます。readyDOM が対話の準備ができたときに起動されます。

MDC からwindow.onload :

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

jQuery API ドキュメントから.ready( handler ) :

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

于 2011-03-03T14:30:34.880 に答える
27

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

window.load()ページ全体 (CSS や画像ファイルなどのコンポーネントを含む) が完全に読み込まれたときにトリガーされます。

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

于 2011-03-03T14:31:30.433 に答える
8 
$(document).ready(function(){
//code here
});

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

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

$(window).load()

画像を加工したい場合もあります。たとえば、画像を垂直方向と水平方向に整列させたい場合、そのためには画像の幅と高さを取得する必要があります。$(document).ready()ビジターが画像をまだ読み込んでいない場合、これを行うことはできません。その場合、画像の読み込みが完了したときに配置関数を初期化する必要がありますjquery。それが私たちが使うところです$(window).load()

于 2011-03-03T14:32:24.507 に答える
7

$(document).readyjQueryDOM がロードされたときに発生するイベントなので、ドキュメント構造の準備ができたときに発生します。

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

これが大きな違いです。

于 2013-04-05T05:52:49.403 に答える
1

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

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

于 2016-07-25T13:07:15.347 に答える
-1

$(document).readyjQueryイベントです。DOM がロードされ、スクリプトによる操作の準備が整うとすぐに起動します。これは、スクリプトがページの html DOM 内の要素に安全にアクセスできる、ページ読み込みプロセスの最も早い時点です。このイベントは、すべての画像、css などが完全に読み込まれる前に発生します。

window.load()ページ全体 (CSS や画像ファイルなどのコンポーネントを含む) が完全に読み込まれたときにトリガーされます。

于 2017-12-22T06:19:58.337 に答える