このブログでは、JavaScript での window.onload と document.onload の違いについて説明します。
JavaScript での window.onload と document.onload の比較
「 window.onload 」 イベントは、ページ全体 (リソースを含む) の読み込みが完了すると発生します。つまり、このイベントを使用して、ページのコンテンツに依存するコードを実行する前にページが完全に読み込まれるようにすることができます。
「 ドキュメントオンロード 」 イベントは window.onload に似ていますが、ドキュメントの DOM (ページのコンテンツの構造) の読み込みが完了したときにのみ発生します。これは、このイベントを使用して、ページのコンテンツが完全に読み込まれ、コードを実行する前に操作できる状態になっていることを確認できることを意味します。
従うべき最善のアプローチは何ですか?
一般に、コードを実行する前にページのコンテンツが完全に読み込まれていることを確認するだけでよい場合は、window.onload の代わりに document.onload を使用することをお勧めします。これは、document.onload が window.onload よりも高速に起動するためです。これにより、コードのパフォーマンスが向上します。ただし、コードを実行する前にページのリソース (画像やスタイルシートなど) が完全に読み込まれていることを確認する必要がある場合は、代わりに window.onload を使用する必要があります。
JavaScript で window.onload と document.onload を使用する方法は?
与えられた例では、コードを実行する前に、これらのイベントがドキュメントの読み込みとウィンドウの読み込みを識別する方法を確認します。
「に電話する」 ドキュメントオンロード alert() メッセージを使用して、ドキュメントが読み込まれたことを通知するイベント:
資料。 オンロード = アラート ( 'document_onload' ) ;「に電話する」 window.onload 」 イベントを作成し、alert() メソッドの結果メッセージをそれに割り当てます。
窓。 オンロード = アラート ( 'window_onload' ) ;
ご覧のとおり、ページが更新されると、最初のドキュメントが読み込まれ、ページ全体の読み込みが完了すると、ウィンドウの onload メソッドが呼び出されます。
以上が、JavaScript の window.onload および document.onload イベントに関するすべてです。
結論
「 window.onload ' と ' ドキュメントオンロード 」は、コードを実行する前に完全なページが読み込まれるようにするための 2 つの JavaScript イベントです。 document.onload は window.onload よりも高速に起動するため、コードのパフォーマンスが向上します。このブログでは、JavaScript での window.onload と document.onload の違いについて説明しました。