【備忘録】ページの各読み込みタイミングにスクリプトを実行する方法まとめ【javascript】 #JavaScript

参考元を読んだ時のメモ
参考（https://www.nishishi.com/javascript-tips/onload-page.html）

参考元は、様々なやり方を紹介しており、大変参考になる。
ただ、自分はHTMLソースはシンプルにしたい派なので
出来るだけscriptファイルで整う方法のみ抜粋。

前提

タイミングは下記３つを想定

webページが読み込まれる前(前)
webページのHTML要素読み込み完了時(直後)
webページの画像などオブジェクトの読み込み完了時（完了後）

参考元順に以下方法を記載

webページの画像などオブジェクトの読み込み完了時（完了後）

window.onload = function() {
   // 実行したい処理
   alert('ページの読み込みが完了したよ！');
}

window.addEventListener("load", function() {
   // 実行したい処理
   alert('ページの読み込みが完了したよ！');
});

webページのHTML要素読み込み完了時(直後)

DOMContentLoadedイベントは「ウェブページのHTMLを最後まで読んだ直後のタイミング」を示す。

const firstscript = function() {
   // 実行したい処理
};

window.addEventListener("DOMContentLoaded", firstscript);

同義だが一応

window.addEventListener("DOMContentLoaded", function() {
   // 実行したい処理
});

webページが読み込まれる前(前)

多分使うことはないだろうけど一応メモ。
下記の解釈でいいのかな。

<head>
   <script type="text/javascript" src="firstscript.js"></script>
   　：　：　：　
</head>

// firstscript.js

function() {
   // 実行したい処理
});

まとめ

テンプレにするとしたらこんな感じかな。
たまに見かけるリッチなサイトの、オープニングアニメーションとか作るなら知ってていい知識かも。

// HTML要素を読み込んだ後に実行
window.addEventListener("DOMContentLoaded", function() {
   // 実行したい処理
});

// 画像などのオブジェクトを全て読み込んだ後に実行
window.addEventListener("load", function() {
   // 実行したい処理
});