0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

DOMContentLoadedとloadの違いについて

Posted at

発火するタイミングが違う

DOMcontentLoadedは HTML が全て読み込まれた時点で発火します。
loadはページ全体(CSS や JS ファイル、外部リソースなども含む)の読み込みが完了した時点で発火する。

という違いあるようです。

使い分け

DOMcontentLoadedは、ボタンなどにイベントリスナーを追加したい場合に使用するなど。画面上に要素が存在しているので、仮にスタイルがあたっていなくても、ユーザーのリクエストに応じて、反応するようにするため。

loadは、画像のスライダーなどに用いると良いようです。画像は非同期的に読み込まれるため、全てが読み込まれた時点で発火するloadが適しています。

まとめ

普段何気なく使用していたイベントですが、しっかりと違いなどを気にかけることは大事だと改めて気が付くことができました!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?