はじめに
jsを実行するタイミングが大きく分けて3つあります。
- 今すぐ実行
- DOMツリーが出来上がってから実行※DOMContentLoaded
- 画像の読み込み等が終わり、最後に実行※onload
これらを意識しながら適切なタイミングで処理を行うことが重要になります。
問題例
DOMを操作する場合
今すぐ実行してしまうと、scriptタグの後ろに記述した内容がロードされていない状態で処理を行ってしまうため、エラーになることがあります。操作対象をscriptタグの前に記述するか、DOMContentLoaded以降に処理を行う必要があります。
DOMツリーが出来上がってから処理を行いたい
onloadで実行しても処理的には問題ないですが、画像のロードを待ってから処理が開始されるため、処理に時間がかかってしまいます。画像ロード前に行える処理ならば、DOMContentLoaded以前に行うべきです
ロードが終わってからローディング画像を消したい
DOMContentLoadedに書いてしまうと、画像の読み込みが終わっていないのにローディング画像が消えてしまいます。このような時はonloadで実行するべきです。
サンプル
私は新規でjsを書く時、下記をコピペして、処理の流れを意識しながらコーディングするようにしています。
js
//グローバル変数の宣言、代入
//変数のスコープがややこしくなるので、ここにはできるだけ処理を書かない
//今すぐ実行する処理
(function() {
}());
//DOMツリーが出来上がったら実行※画像読み込み前
document.addEventListener('DOMContentLoaded', function() {
});
//最後に実行※画像読み込み後
window.onload = function() {
};