ページの読み込み時にトリガーされるイベントとシーケンス

はじめに

ページが読み込まれると、大きく次の手順に分かれます:

1. HTML 文書構造の解析を開始する

2. 外部スタイルシートと JavaScript スクリプトを読み込む

3. JavaScript スクリプトを解析して実行する

4. DOM ツリーのレンダリングが完了しました

5. 未完成の外部リソース (画像など) をロードしました

6. ページは正常にロードされました

では、このプロセス全体で 一般的に使用されるイベントは何でしょうか?

documentreadystatechangeevent

readyState属性は、読み込みプロセス全体の間、document.readyStateは変化し続け、それぞれの変化がreadystatechangeイベントをトリガーします。

readyState のステータスは次のとおりです:

読み込み中 / 読み込み中 document はまだ読み込み中です。

document 仍在加载。

　　　　interactive / 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

　　　　complete / 完成T文档和所有子资源已完成加载。状态表示 load interactive / インタラクティブドキュメントのロードが完了し、ドキュメントが解析されましたが、画像、スタイルシート、フレームなどのサブリソースはまだロード中です。

complete/Complete T ドキュメントとすべてのサブリソースがロードされました。このステータスは、load イベントがトリガーされようとしていることを示します。

例えば、ステップ2でインタラクティブに対応し、ステップ5以降で完了した場合、readystatechangeイベントがトリガーされます。

追記：ドキュメントや画像などを読み込む際のreadyStateとXMLHttpRequest.readyStateは異なります。

document DOMContentLoaded イベント

の区別に注意してください。 DOMContentLoaded イベントは、DOM ツリーのレンダリングが完了したときにトリガーされます。この時点で、外部リソースがまだ読み込まれている可能性があります。 jqueryのreadyイベントも同じ効果があります

windowloadevent

すべてのリソースが読み込まれると、ウィンドウのloadイベントがトリガーされます。

ドキュメントのloadイベントがトリガーできないのですが、MDNにはこのイベントがあるのでしょうか？神に導きを求めてください！ ！ ！

Instance

  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <script type="text/javascript">
    console.log(&#39;resolve body JavaScript&#39;);
   
    window.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;window load&#39;);
    })

    document.addEventListener(&#39;readystatechange&#39;,function(){
      console.log(&#39;document &#39; + document.readyState);
    })

    document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;document DOMContentLoaded&#39;);
    })    //document 没有load事件??    document.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;document load&#39;);
    })  </script>

Chrome でのログ出力は次のとおりです。一貫性がある 期待はありません。したがって、実行前にドキュメント構造のみをロードする必要があるスクリプトは DOMContentLoaded を監視できます。実行前にすべてのコンテンツをロードする必要があるスクリプトは window.onload または document.readyState === 'complete' を監視する必要があります。

以上がページの読み込み時にトリガーされるイベントとシーケンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。