JavaScript onload (日本語)

概要:このチュートリアルでは、JavaScriptのドキュメント、画像、スクリプト要素で発生するloadイベントを処理する方法を学習します。

ウィンドウのロードイベント

windowオブジェクトの場合、loadイベントは次の場合に発生します。 JavaScriptファイル、CSSファイル、画像などのすべての依存リソースを含む、ウェブページ全体(HTML)が完全に読み込まれました。

loadイベントを処理するには、登録しますaddEventListener()メソッドを使用するイベントリスナー:

Code language: JavaScript (javascript)

またはonload<windowオブジェクトの/ div>プロパティ:

Code language: JavaScript (javascript)

レガシーシステムを維持している場合は、次のことがわかります。 loadイベントハンドラーは、次のようにHTMLドキュメントのbody要素に登録されます。

onloadイベントハンドラーを割り当てるdiv>メソッド。

画像のロードイベント

loadイベントは画像でも発生します。画像のloadイベントを処理するには、画像要素のaddEventListener()メソッドを使用できます。

次の例では、loadイベントハンドラーを使用して、DOMツリーに存在するイメージが完全に読み込まれたかどうかを判断します。

イベントハンドラーは、次のように、<img>要素のonload属性を直接使用します。

Code language: HTML, XML (xml)

画像要素を動的に作成する場合は、iv id = “c341d7013bを設定する前に、onloadイベントハンドラーを割り当てることができます。 “>

プロパティは次のとおりです:

仕組み:

  • まず、コードを内部に配置して、ドキュメントが完全に読み込まれた後に画像要素を作成しますウィンドウのロードイベントのイベントハンドラー。
  • 次に、onloadイベントハンドラーを画像に割り当てます。
  • 3番目に、画像を追加します。ドキュメントに。
  • 最後に、画像のURLをsrc属性に割り当てます。 srcプロパティが設定されるとすぐに、画像が要素にダウンロードされます。

スクリプトのロードイベント

<script>要素は、標準の方法とは少し異なるloadイベントもサポートします。

スクリプトのloadイベントを使用するとJavaScriptファイルが完全にロードされているかどうかを確認します。

画像とは異なり、Webブラウザはsrcプロパティが割り当てられ、 <script>要素がドキュメントに追加されました。

次のコードは、ページが作成された後にapp.jsファイルをロードします。完全にロードされました。 onloadイベントハンドラーを割り当てて、app.jsが完全に読み込まれたかどうかを確認します。

概要

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です