ドキュメントの読み込みを決定するためのいくつかの異なる方法 process_html/css_WEB-ITnose

ページの読み込みを決定するためによく使用される 2 つのメソッド

1. $(document).ready()

このメソッドは、ドキュメント構造が読み込まれるとき、つまり完全な DOM ツリーが読み込まれるときです。形成されました (画像と iframe の読み込みが完了していません) がトリガーされました。他のいくつかの書き方:

• $(function(){});
• $().ready(function(){})

2. window.onload

このメソッドは、すべてのページ要素がロードされたときにトリガーされます (画像と iframe のロードを含む)。 jQuery にも同じメソッドがあります: $(window).load(function() {});

3. 2 つのメソッドの比較

上記 2 つのメソッドを Web ページに追加すると、ページが読み込まれると、コンソールの出力結果は次のようになります:

Html5 でのページ読み込みメソッド

1.readystatechange イベント

このイベントをサポートします: IE、Firefox4+、Opera Readystatechange イベントをサポートする各オブジェクトには 1 つあります。 ReadyState 属性。次の 5 つの値があります:

• uninitialized (初期化されていない): オブジェクトは初期化されていません
• loading (読み込み中): オブジェクトは読み込み中です
• loaded (読み込み済み): オブジェクトのデータの読み込みが完了しました
• interactive (インタラクティブ) ): オブジェクトは操作できますが、完全にはロードされていません。
すべてのオブジェクトがこれらの 5 つの段階を通過するわけではなく、readyState 属性値は完了しません。常に継続的。

load イベントと一緒に使用した場合、2 つのイベントがトリガーされる順序を予測することは不可能です。外部リソースが多いまたは多いページでは、load イベントがトリガーされる前にインタラクティブ ステージに入りますが、外部リソースが少ないまたは少ないページでは、load イベントの前に readystatechange イベントが発生すると言うのは困難です。フロント。

アプリケーションのサンプルコード:

   document.addEventListener("readystatechange",function(){      if (document.readyState == "complete") {        console.log("readystatechange-complete");       }   });

2. DOMContentLoaded イベント

このイベントをサポート: IE9+、Firefox、Chrome、Safari3.1+、Opera9+

DOMContentLoaded イベントは、完全な DOM ツリーが形成された後にトリガーされます。無視してください。画像、JavaScript ファイル、CSS ファイル、またはその他のリソースがダウンロードされているかどうか。 ——「JavaScript 高度なプログラミング」

このイベントと前の 2 つのメソッドの違いを確認したかったので、テストを行って次のコードを HTML ページに追加しました:

コンソールの出力結果:

DOMContentLoaded イベントが $(document).ready() イベントの後に実行され、画像のロードを無視して DOM がロードされた後に実際に実行されることがわかります。しかし、$(document).ready() がより大きな js ファイルの最後に書かれ、head の html ファイルに導入された場合、最終的なコンソール出力は次のようになります。 JavaScript ファイルのダウンロードを無視しないでください この理解が正しいかどうかわかりませんが、皆さんにアドバイスをお願いします~O(∩_∩)O~