[JavaScript] ロードのタイミング


■ウェブ上のあらゆるオブジェクトの読み込みがすべて完了した後で処理をする方法

(A) HTMLでbody要素に「onload」属性を指定して、値に処理を書く。
(B) JavaScriptソースに window.onloadメソッドを利用して、値に処理を書く。

■ウェブページのHTMLが読み込み完了した時点で何らかの処理をする方法

さて、先ほどの方法では、ページ上に存在する画像など「すべてのオブジェクト」の読み込み完了を待ってから処理が実行されます。
しかし、その方法だと、「ページの大きさ」や「掲載されている画像のファイルサイズ」などによっては、スクリプトが実行されるまでに結構な待ち時間が発生する場合もあります。

ナビゲーションメニューを提供するスクリプトなど、「HTMLさえ全部読み込まれていれば、ページ上の画像などの読み込みを待つ必要は無い」という場合もあるでしょう。ナビゲーションに利用するスクリプトなど、ページ上の表示を動的に変更するような処理の場合は、

できるだけ早く実行された方が望ましい。
でも、HTMLソースが読み終わるよりも前に実行されると困る。
という条件(制約)があります。
このような場合には、『HTMLソースの末尾にスクリプトを記述する』、または『HTMLソースの末尾で指定の関数を実行する』ように記述すれば実現できます。

HTMLの本文の末尾には、以下のようにbody要素の終了タグがあるはずです。

</body>

HTMLソースの末尾でJavaScriptファイルを読み込めば良いです。

  <script type="text/javascript" src="firstscript.js"></script>
</body>

■ウェブページが読み込まれる前に何らかの処理をする方法

head要素の中にでも書いておく。

<head>
  <script type="text/javascript" src="firstscript.js"></script>
</head>
最終更新:2015年02月20日 10:01
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。