まず、jQuery について説明します。 jQuery には、JavaScript を DOM として素早くロードするための便利な小さな関数があります。これは準備ができています... ページがロードされる前に実行されます。
window.onload() を使用しない理由は、window.onload 関数が実行されるときに、画像やバナーなどを含むすべてがロードされたことを示す必要があるからです。大きい画像のダウンロード速度は遅くなるため、ユーザーは window.onload() 実行のコード効果を確認する前に、大きい画像がダウンロードされるまで待つ必要があり、待ち時間が長くなります。私たちが望むものではありません。
ただし、$(document).ready(fn): DOM がロードされ、クエリと操作の準備ができたときに実行される関数をバインドします。
これは、Web アプリケーションの応答速度を大幅に向上させることができるため、イベント モジュールで最も重要な機能です。
簡単に言えば、このメソッドは、window.load イベントを使用してイベントを登録することの純粋な代替手段です。このメソッドを使用すると、DOM がロードされ、読み取りと操作の準備が整うとすぐに、バインドした関数を呼び出すことができます。 $(document).ready(function(){ // コード });
$(document) は、Web ドキュメント オブジェクト全体 (window.document と同様) を取得することを意味します。
$(document).ready は、準備ができたときにドキュメント オブジェクトを取得することを意味します。上記のコードの意味は、操作が許可されるまでドキュメント オブジェクトをチェックすることです (翻訳者注: ドキュメント オブジェクトがロードされている限りコードは実行できるため、これは window.onload() 関数よりもはるかに高速です)の代わりに、ページ上の画像のダウンロードが完了したかどうかを確認するまで待つ必要があります) --- これが私たちが望んでいることです。