.net column
.NET開発者のためのブログメディア

JavaScriptのonloadについて解説します

 
JavaScriptのonloadについて解説します
SE
JavaScriptのonloadについて教えてください。
PM
JavaScriptが実行されるタイミングによってはうまく動作しないのですが、それを解決するのがonloadです。

JavaScriptのonloadとは?


JavaScriptのonloadは、Windowsインターフェイスのメソッドです。
具体的には以下のような使い方をします。

こうすることによって、function内の処理を画面を全部読み込んだ後に実行することができます。このonload、どのような場合で使用すれば良いのでしょうか。

JavaScriptを記述できる場所

onloadの使い道を知るには、まずJavaScriptがブラウザ上でどのようなタイミングで処理されるのかを理解する必要があります。

ブラウザで表示されるHTMLは上から順に実行されますが、JavaScriptはheadタグ内にも、bodyタグ内にも記述できます。

headタグ内にJavaScriptを記述した場合

headタグにJavaScriptを記述すると、bodyタグ内のHTMLコードと分けることが出来るのでスマートです。しかし、以下のような処理をheadタグに記述するとどうなるでしょうか。

処理の順番の関係でJavaScriptが正しく動作しない

上記JavaScriptサンプルは、getElementByIDでid属性がtestのdivタグを取得し、innerHTMLで「テストです。」というテキストを設定しています。しかし、これを実行しても何も表示されません。その理由は、上記で説明した通りHTMLが上から順に実行されるからです。

headタグのJavaScriptが実行される時点ではまだdivタグが読み込まれてないため、取得することができないのです。コンソールでは以下のようなエラーが出ます。

JavaScriptを後に実行すれば解決?

上記問題は、divタグの後にJavaScriptの処理を記述すれば解決できます。以下を実行すれば、「テストです。」と表示されます。

headタグにJavaScriptを記述するには?

今回のケースをMVCという設計概念に当てはめると、HTMLはV(ビュー)でJavaScriptはC(コントローラー)です。VとCは混在させず分離するべきです。JavaScriptをbodyタグの一番最後に記述すればまず問題はありませんが、headタグにまとめた方がスマートでしょう。

HTMLの先頭のheadタグ内にJavaScriptをまとめたい場合はどうすれば良いのでしょうか。そうしたい場合に、windows.onloadが役立つのです。

onloadを使用すればheadタグでも問題ない

以下のようにonloadを使用すると、JavaScriptの処理がheadタグ内でも「テストです。」と表示されます。onloadで指定した関数は、HTMLが全て読み込まれた後に実行されるのです。

bodyタグのonloadイベントも使える

window.onload以外にbodyタグにonloadイベントを指定することができます。以下のようにしても上記サンプルと同じ動作をします。

onloadが複数あると上手く動作しない

onloadには1つ問題点があります。それは複数のonloadがあると期待通りの動作をしてくれない事です。例えば以下のようにonloadが2つあるとします。

実行すると「二番目」だけが表示されて一番目は出ません。最後にあるonloadしか実行されないのです。

addEventListenerを使えば解決

上記問題はaddEventListenerを使えば解決します。以下のようにしましょう。

これで一番目と二番目が両方表示されます。

必要ならDOMContentLoadedを使用する

window.onloadも、addEventListener(‘load’~)も、ブラウザが全てのリソースを読み込んだ後に実行されます。しかし、それでは遅い場合が考えられえます。画像がなかなか読み込まれないとJavaScriptの処理がいつまでも実行されません。

そこでDOMのツリー構造が読み込まれた時点でJavaScriptを実行したい場合は、DOMContentLoadedイベントを使用します。

上記を実行すると、二番目が一番目より先に表示されます。DOMContentLoadedイベントの方がloadイベントより早いということですね。
SE
JavaScriptのonloadについてよく分かりました。
PM
JavaScriptは処理を行うタイミングが重要なので、しっかり理解しておきましょう。

onloadを使用して適切なタイミングで実行しよう

JavaScriptのonloadを解説しましたが、いかがでしたでしょうか。JavaScriptは意外と処理を行うタイミングが重要なので、しっかりと把握しておきましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags