Written by Kasumi

JavaScriptでDOM(HTML)・画像の読み込み完了時に任意の処理を実行する方法

JavaScriptでDOM(HTML)・画像の読み込み完了時に任意の処理を実行したい。

本記事ではこのような悩みを解決します。

DOM(HTML)の読み込み完了後に処理を実行

document.addEventListener("DOMContentLoaded", function () {
  // DOM(HTML)が読み込んだ後に実行
});

addEventListenerを使って処理を記述します。

第一引数にDOMContentLoadedを指定。

DOM(HTML)の読み込み完了後に第二引数の関数を実行します。

DOM・画像の読み込み完了後に処理を実行

document.addEventListener("load", function () {
  // 画像やCSSなど全てのリソースが読み込み完了した後に実行
});

同じくaddEventListenerを使います。

第一引数をloadを指定。

DOMに加えて画像やCSSなど全てのリソースが読み込み完了した後に第二引数の関数を実行します。

まとめ

JavaScriptでDOM(HTML)・画像の読み込み完了時に任意の処理を実行する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript初心者向け】文字列・配列の要素数を調べる方法

2022.08.23
195
JavaScript

JavaScriptでコンテンツの内側・外側をHTMLタグで囲う方法

2022.10.26
339
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
1477
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
571