今回は画面上に表示される要素の読み込みを待ってプログラムを動かせるようにする方法をご紹介します。
似たようなやり方がいくつかあって、初心者の方は「何が違うんや・・・」と挫折しがちなので、
違いを含めてわかりやすく解説します。
まずは基礎知識を整理しよう
「画面の要素の読み込みを待つ」ことを、一般的に「DOMの読み込みを待つ」と言います。
DOMってなんだ？ガンダム？って方のために↓
DOMとは
DOM（Document Object Model）とは、HTMLやXML文書の構造を表現し、プログラムやスクリプトからその構造を操作できるようにするための仕組みのこと。
つまり例えば、「JavaScirptでこの文字赤くしたいなー」と思ったら、「どこの」「どの部分を」「どうしたい」というのを明確に指定して指示できるような仕組みがないとプログラム側から変更を加えたり手を出すことができないわけです。
それをできるようにしたのがDOMという仕組みなんですね。
またDOMはツリー構造になっていて、それぞれの要素をノードと表現します。
ここは興味があればググってみてください。
DOMの読み込みを待つ方法
それではいよいよDOMの読み込みを待つ方法３選を紹介していきましょう。
window.onload
まずはonloadについてです。
いかにもload、読み込みを待ってくれそうな名前してますよね。
書き方はこんな感じ
window.onload = function() {
// ここに任意の処理
}このように書けば、すべてのDOMツリーが読み込まれたあとに、プログラムが実行されるようにできます。
ただしonloadには注意点があります。
それは、複数のonloadを書くと、最後のひとつしか動かないということ。
例えば下記のように別々のonloadを複数書くと、
window.onload = function() {
console.log('１番目のやっほー');
}
window.onload = function() {
console.log('２番目のやっほー');
}
window.onload = function() {
console.log('３番目のやっほー');
}最後の「３番目のやっほー」しか出力されません。
これはもうそういうものなので覚えるしかありません。
onloadは複数書くと、最後のひとつしか動かない。
ですが、次に説明するaddEventListener()を使うと、複数になっても動作します。
addEventListener(‘load’)
addEventListener()は、scrollやclickなど、トリガーとなるアクションを指定できるものですが、今回は読み込みなのでloadを使います。
上と同じプログラムをaddEventListener()を使って書くと、下記のようになります。
window.addEventListener('load', function() {
console.log('１番目のやっほー');
})
window.addEventListener('load', function() {
console.log('2番目のやっほー');
})
window.addEventListener('load', function() {
console.log('3番目のやっほー');
})この場合出力結果としては、
１番目のやっほー
2番目のやっほー
3番目のやっほー
と、全て表示されます。なので、addEventListener()を使うと、loadイベントが重複していても全て実行してくれます。
addEventListener(‘DOMContentLoaded’)
window.onload、addEventListener()と見てきましたが、実は二つとも、
DOMのレンダリング（描画）のほか、画像などのリソースも全て読み込んだあとに実行される処理なので、動作まで少し時間がかかります。
addEventListener(‘DOMContentLoaded’)はDOMとツリー構造の読込さえ終われば動き出すので、速いです。
書き方はこんな感じ↓
window.addEventListener('DOMContentLoaded', function() {
// ここに任意の処理を書く
})画像まで読み込む必要がない場合は、DOMContentLoadedが最適になるでしょう。
まとめ
速い方が良いとかではなく、実行したい処理の内容によって、プログラムを動かしたいタイミングも様々でしょう。
今回紹介した方法を使い分けて、DOMを自由自在に扱っていけるようになりましょう。
・onloadは複数書くと最後の１つしか実行されないよ
・onload、addEventListener(‘load’)はDOM以外に画像などの表示まで待つよ
・addEventListener(‘DOMContentLoaded’)はDOMの読み込みだけ待つから速いよ
それでは良いWebライフを～
