JavaScript ページがロードされるのを待つ

今日の投稿では、JavaScript でページが完全に読み込まれるのを待つことについて説明します。

JavaScript でイベント リスナーを使用してページの読み込みを待機する

EventTarget インターフェイスの addEventListener() メソッドは、指定されたイベントがターゲットに配信されるたびに呼び出される関数を構成します。

addEventListener() メソッドは、EventListener を実装する関数またはオブジェクトを、呼び出された EventTarget で指定されたイベント タイプのイベント リスナーのリストに追加することによって機能します。

関数またはオブジェクトがそのターゲットのイベント リスナーのリストに既にある場合、その関数またはオブジェクトは 2 回目は追加されません。

EventTarget インターフェイスの removeEventListener() メソッドは、EventTarget.addEventListener() を使用して、以前にターゲットから登録されたイベント リスナーを削除します。

以下の例を見てみましょう。

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.addEventListener(
    'load', () => {alert('Hello World.This page is loaded!')});

上記の例では、ウィンドウにイベントリスナー関数が登録されています。 このイベント リスナーは、ページが完全に読み込まれるのを待ってから、ページが読み込まれたことをユーザーに通知します。

ブラウザで次のコードを実行してみてください。 次の結果が表示されます。

出力：

window.onload イベントを使用して、JavaScript でページが読み込まれるのを待機する

GlobalEventHandlers ミックスインの onload プロパティは、window、XMLHttpRequest、img 要素などでロード イベントを処理するイベント ハンドラーです。

load イベントは、特定のリソースが読み込まれたときにトリガーされます。

load イベントは、ドキュメントの読み込みプロセスの最後にトリガーされます。 ドキュメント内のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、リンク、およびサブフレームが完全に読み込まれています。

両方のソリューションの唯一の違いは、最近のブラウザーでは、戻る/進む履歴ボタンを使用したときに window.onload が起動しないことです。 対照的に、リスナーは毎回起動されます。

<div>
  <p>
    Welcome to wait for page load blog post.
  </p>
</div>

window.onload = function() {
  console.log('Hola!.This page is loaded!')
};

出力：

"Hola!.This page is loaded!"

デモはこちら