【JS】onloadイベントの使い方読込を待つ方法３選

2023年6月13日2024年5月17日

WEBプログラミングを学び始めた初心者がよくつまずく点として

JS書いたのに動かん・・・。

というのがあると思います。

理由は色々ですが、よくある例のひとつとして、

HTMLが読み込みされる前にJavaScriptの方が先に走ってしまうというのがあります。

そういった場合、JSのプログラムが画面(HTML要素)の読込を待ってから動くようにすればいいですよね。

というわけで今回は、

画面上の要素の読み込みを待ってプログラムを動かせるようにする方法をご紹介します。

似たようなやり方がいくつかあるので、違いを含めてわかりやすく解説します。

まずは基礎知識を整理しよう

「画面の要素の読み込みを待つ」ことを、一般的に「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が最適になるでしょう。

まとめ

速い方が良いとかではなく、実行したい処理の内容によって、プログラムを動かしたいタイミングも様々でしょう。

例えば、本来Aという画像が表示されるところを、Bという画像を表示したい、とします。

するとこの場合は、addEventListener(‘DOMContentLoaded’)がより理想に近いでしょう。

もしAの画像が確実に読み込まれるのを待ったうえで、その画像をBに変化させたい（変化を見せたい）のであれば、

window.onloadなどを使用する方がイメージに近いと言えるかもしれません。（厳密にはもっといい方法がある）

今回紹介した方法を使い分けて、DOMを自由自在に扱っていけるようになりましょう。

・onloadは複数書くと最後の１つしか実行されないよ
・onload、addEventListener(‘load’)はDOM以外に画像などの表示まで待つよ
・addEventListener(‘DOMContentLoaded’)はDOMの読み込みだけ待つから速いよ

実装したい内容によって使い分けたらええな

JavaScriptオススメ書籍

JavaScriptを効率よく基本から実装まで学ぼうとしている方には、こちらの書籍がオススメです。

リンク

こちらはWebクリエイターボックスのManaさんが書かれた書籍で、ポイントは以下のような感じです。

・JavaScriptの基本から実装まで必要なことがすべて学べる
・図解が充実していて読みやすい
・章立てや構成がよくできていてスムーズに読み進められる
・アニメーションやイベントの知識と技術がつまっている
・サンプルプログラムがWeb上からダウンロードできる（自分でコードを用意しなくて良い）

タイトルどおり、一冊でまるっと学べる書籍になっているので、初学者必携の一冊といってもいいでしょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【JS】onloadイベントの使い方 読込を待つ方法３選