読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

今回はJavaScriptのonloadイベントについて解説します!

JavaScript初心者がよくつまづいてしまうエラーについても解説するので、JavaScriptを学び始めた方は必見です!

onloadイベントとは?

onloadイベントはJavaScriptに用意されているイベント処理の一つです。

イベント処理は「クリックしたら〜」とか「スクロールしたら〜」とはさまざまなものがありますが、onloadイベントは「HTMLや画像などのページに表示するリソースを読み込んでから〜」というイベント処理になります。

HTMLや画像をJavaScriptで操作する場合、先に操作するHTML要素や画像が読み込まれている必要があるので、非常によく使用するイベントになります。

こちらについては、後ほどサンプルコードを用いて詳しく解説します!

onloadイベントの使い方

onloadイベントの書き方は以下の通り。

window.onload = function() {
  console.log("ページ読み込み完了")
}

{〜}内にHTMLや画像が読み込まれてたら実行したい処理を書きます。

JavaScriptが動かない?onloadイベントで解決するかも!

JavaScriptを書いていると、「記述は間違っていないはずなのに、なぜか動かない…」なんてことがよくあります。

例えば、以下のコードではエラーが出てしまいます。

<script>
    let button = document.getElementById('xxx');
    button.addEventListener('click', function(){
        console.log('Hello');
    });
</script>

<input type="button" value="button" id="xxx">

コンソールに以下のようなエラーが…

s

HTMLは上から順に読み込まれていきます。

スクリプトは「xxxというidがついた要素」を探そうとしますが、その時はまだ下の対象要素が読み込まれていないため、見つからずにエラーが出てしまいます。

もうおわかりかと思いますが、下のようにこのスクリプトをonloadイベントの中に入れてしまえば解決します!

onloadイベントを使用した場合

<script>
    window.onload = function () {
        let button = document.getElementById('xxx');
        button.addEventListener('click', function () {
            console.log('Hello');
        });
    }
</script>

<input type="button" value="button" id="xxx">

対象要素が下に書かれていたとしても、HTMLが読み込まれてからスクリプトを実行するのでちゃんと対象要素を見つけて問題なくスクリプトが動作します。

ちなみに、単純に対象要素よりもスクリプトが下にあればonloadイベントを使用しなくても大丈夫です。(上で説明した通り、HTMLは上から順に読み込まれていくため)

下にスクリプトを持ってきた場合

<input type="button" value="button" id="xxx">
<script>
    window.onload = function () {
        let button = document.getElementById('xxx');
        button.addEventListener('click', function () {
            console.log('Hello');
        });
    }
</script>

このような決まりがあることから、JavaScriptのコードは</body>の直前に書くことがいいとされています。

<head>~</head>内に書く場合は、onloadイベントを使用する必要があります。

HTMLが読み込まれたら実行するDOMContentLoadedイベントも紹介

説明したとおり、onloadイベントはHTMLを含め外部ファイル(画像やcssなど)すべてのリソースが読み込まれてから実行するという処理になります。

そのため順番としては最後となり、ちょっと遅すぎるなんて時もあります。

そんな時は、DOMContentLoadedイベントを使用しましょう。

document.addEventListener('DOMContentLoaded', function() {
  console.log("HTML読み込み完了")
});

DOMContentLoadedイベントは、HTMLが読み込まれたら実行するイベントで、画像などの外部ファイルを読み込む前に実行されます。

画像などを扱うスクリプトでなければ、こちらを使用してもOKです。

JavaScriptのonloadイベントのまとめ

以上、JavaScriptの代表的なイベント処理の一つ、「onloadイベント」について解説しました!

HTMLや画像が先に読み込まれていなくてエラーが起きてしまうのは、JavaScript初学者の方に特に多いつまづきポイントなので、必ず押さえておきましょう!

実際にloadイベントを使用している記事はこちら

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

×