画像を含むページが完全に読み込まれたときに JavaScript 関数を実行するにはどうすればよいですか?

ページが完全に読み込まれたときに JavaScript 関数を実行する

質問:

JavaScript 関数を実行のみにトリガーするにはどうすればよいですか?画像を含むページ上のすべての要素の読み込みが完了したら?

答え:

解決策は、load イベントを利用することです。 HTML ドキュメントが解析され、DOM ツリーの準備ができたときに発生する DOMContentLoaded イベントとは異なり、load イベントは、画像を含むすべてのリソースが読み込まれるまで待機します。これにより、ページ全体が完全にロードされたときにコードを実行するのに最適になります。

実装:

ページが完全にロードされたときに関数を実行するには、次のコード:

<code class="js">window.addEventListener('load', function () {
  // Your code here will run when the page is fully loaded
});</code>

例:

たとえば、ページが完全に読み込まれたときにアラート ボックスにメッセージを表示したい場合は、次のように使用できます。次のコード:

<code class="js">window.addEventListener('load', function () {
  alert("It's loaded!");
});</code>

load イベントを使用すると、画像やその他のリソースを含むすべてのページ要素の読み込みが完了した後にのみ JavaScript コードが実行されるようになります。これは、ページが完全にロードされる前にコードが途中で実行されることによって発生する可能性のある問題を防ぐのに役立ちます。

以上が画像を含むページが完全に読み込まれたときに JavaScript 関数を実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。