【Javascript】ページ読込前・直後・完了時に実行（window.onload）

このページでは、Javascriptを用いてページ読込前・直後・完了時に処理を実行する方法とソースコードについて紹介します。

## 実行のタイミング

JavaScriptでは、以下のタイミングに分けてスクリプトを実行させることができます。

このうち、よく使うのは②と③です。
例えば②は、ブラウザゲームの場合、ロード画面（ゲーム素材をロードしてる時の待機画面）に使ったりします。
③は肝心のゲームの処理に使います。

## ページの読込前

ページの読込が完了する前に処理を実行する場合は、HTML側のheadタグ内にスクリプトを記述します。

<head>
︙
<pre type="text/javapre">
alert("にゃんぱすー");
</pre>
</head>

<head>
︙
<pre type="text/javapre" src="main.js"></pre>
</head>

## HTMLの読込完了時

画像などのオブジェクトの読み込み完了を待たず、ページのHTMLファイルのみ読み込みが終わった時点でスクリプトを実行したい場合、「bodyタグの末尾」にスクリプトを記述します。

<body>
︙
<pre type="text/javapre">
alert("にゃんぱすー");
</pre>
</body>

例2

<body>
︙
<pre type="text/javapre" src="main.js"></pre>
</body>

ページのナビゲーションに利用するスクリプトなど、ページを動的に表示する場合は、HTMLのソースを読み込み終わるまで待つ必要があるため、これを使用します。

## 全コンテンツ読み込み完了時

HTML, CSS、画像など、全コンテンツの読み込みが完了した時に実行するには、onloadイベントを使います。
onloadイベントの記述方法は主に以下の2通りあります。

HTML側のbody要素にonload属性を指定して値に処理を記述します。

<body onload="alert("にゃんぱすー");">

JavaScript側のコードで、window.onloadメソッドの値に処理を書きます。

window.onload = function() {
   alert('にゃんぱすー');
}

複数のページに同じ処理を施す場合は、「JavaScriptファイル側に記述」した方が処理を修正する場合に楽です。
（1つのJavaScriptファイルを修正するだけで済むため）

–	関連記事
1	Javascript入門サンプル集