読み込み時にイベント処理を!JavaScriptでonloadを使う方法【初心者向け】

初心者向けにJavaScriptでonloadを使う方法について解説しています。ページが読み込まれたタイミングや画像が読み込まれたタイミングなどで何かイベントを起こすことができます。普段使っているサイトでもよく見られるので、ぜひ書き方を覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでonloadを使う方法について解説しています。

読み込み後何かアクションを起こしたい時に役立つので、書き方をきちんと覚えておきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

onloadとは

onloadとは、HTMLなどの文書を操作するときに利用するイベントハンドラーのことです。

onloadは、ページとすべての画像などのリソース類を読み込んでから処理を実行するときに利用します。

利用ケースとしては、スライダーや画像ギャラリーのような画像を読み込んでから処理を実行したいときなどが挙げられます。

 

onloadの書き方

onloadの書き方は以下のようになります。

obj.onload = function() {
// ここに読み込みが完了したら実行したい処理を記述する
}

objには、windowやHTMLのbody、imgなどの要素を指定することができます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

ページがロードされたら実行する

以下の例を実行すると、windowオブジェクトが読み込まれたタイミングで処理が実行されていることが分かります。

window.onload = function() {
  alert("ページが読み込まれました!");
};

上記の例は以下のようにも記述できます。

function load() {
  alert("ページが読み込まれました!");
}
window.onload = load;

 

画像が読み込まれたら実行する

下記は、画像が読み込まれたタイミングで処理を実行する例です。

var img = new Image();
img.onload = function() {
  alert("画像が読み込まれました!");
};
img.src = 'xxx.png';

 

onloadの注意点

onloadによるイベントハンドラーは、同一要素の同一イベントに対して複数のイベントハンドラーを設定することができません。

もし同一要素の同一イベントに対して複数のイベントハンドラーを設定したい場合にはaddEventListenerを使用しましょう。

addEventListenerの詳しい説明はこちらにあります。

 

また、onloadはページとすべての画像などのリソース類を読み込んでから処理を実行したい場合に使用しますが、読み込みを待たずに処理を実行したい場合にはDOMContentLoadedを使用します。

DOMContentLoadedの詳しい解説はこちらにあります。

 

まとめ

onloadはページの見た目部分を操作するDOM(Document Object Model)において非常によく利用するイベントになりますので、ぜひ覚えておきましょう。

普段見ているWebサイトでもよく使われているので、JavaScriptの基本として理解しておくと良いでしょう。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。