jquery - `$(window).load(function(){})` と `$(function(){})` の違いは何ですか

Question

私は自分のプロジェクトに使用$(window).load(function(){});していましたが、どこかで誰かが私たちがそのまま使用でき、同じよう$(function(){});に機能すると言っているのを見るまで.
しかし、より多くの経験を積んだ今、それらが同一ではないことに気付きました. 最初の部分が 2 番目のコードの少し後に開始されることに気付きました。
何が違うのか知りたいだけですか？

Answer 1

$(document).ready(function(){})

ドキュメントがロードされるまで（DOMツリーがロードされるまで）待機し、ウィンドウ全体がロードされるまで待機しません。たとえば、images、css、またはjavascriptが完全に読み込まれるのを待ちません。DOMにすべてのHTMLコンポーネントとイベントハンドラーが読み込まれると、ドキュメントを処理する準備が整い、$（document）.ready（）が完了します。

$(window).load(function(){});

これは、ウィンドウ全体がロードされるのを待ちます。ページ全体が読み込まれると、$（window）.load（）のみが完了します。したがって、明らかに$（document）.ready（function（）{}）は$（window）.load（）の前に終了します。これは、コンポーネント（images、cssなど）の入力にDOMツリーのロードよりも時間がかかるためです。

したがって$(function(){});、の代わりとして使用することはできません$(window).load(function(){});

Answer 2

jQueryドキュメント自体から。

ほとんどの Javascript プログラマーが最終的に最初に行うことは、次のようなコードをプログラムに追加することです。

window.onload = function(){ alert("welcome"); }

その中には、ページがロードされたときに実行するコードがあります。ただし、問題は、すべての画像のダウンロードが完了するまで Javascript コードが実行されないことです (これにはバナー広告も含まれます)。最初に window.onload を使用する理由は、最初にコードを実行しようとしたときに、HTML 'ドキュメント' の読み込みがまだ完了していないためです。

両方の問題を回避するために、jQuery には、ready イベントと呼ばれる、ドキュメントをチェックし、操作の準備ができるまで待機する単純なステートメントがあります。

$(document).ready(function(){
   // Your code here
 });

今、

$(window).load(function(){}); に等しいwindow.onload = function(){ alert("welcome"); }

そして、$(function(){}); への近道です$(document).ready(function(){ });

私は思う、これはすべてをクリアします:)

Answer 3

$(window).load私の経験から、画像を含むすべてがロードされるまで待ってから実行します$(function() {});。$(document).ready(function() {});

私が間違っている場合は、誰かが私を修正してください。

Answer 4

2 番目は、のロード イベントの$(document).ready()前に実行する必要がある のショートカットです。window

ロード$(document).ready()するものをバインドするための推奨される方法であることに注意してください。documentあなたが示したもののようにそれを行うには他にもいくつかの方法がありますが、それが好ましいです。