Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:45.

ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ

ウェブページの読み込み完了と同時に何らかの処理をしたい場合など、「ページの読み込み動作」とタイミングを合わせて特定の処理をしたいことあります。このとき、JavaScriptを記述する方法はいくつかあります。今回はその点を解説してみます。

「ウェブページの読み込みタイミング」と、「スクリプトを実行するタイミング」の関係としては、例えば以下のような場合があるでしょう。

  1. ウェブページが読み込まれる前に何らかの処理をする。
  2. ウェブページのHTMLが読み込み完了した時点で何らかの処理をする。
  3. ウェブページ上に掲載されたあらゆるオブジェクト(画像など)の読み込みがすべて完了した後で何らかの処理をする。

個人的には、上記2のケースが多いのですが、まあ処理内容によって望みのタイミングはいろいろでしょうね。
たぶん最もスタンダードなのは、上記の3でしょう。「ページの読み込みが完了した時点」としか言わない場合、上記2のことなのか3のことなのか区別しづらいですが、「onload」というイベントが指し示すのは上記3の「ページ上のあらゆる物体の読み込みが完了した後」という時点です。

では、最もスタンダード(だと思われる)上記3の場合から紹介していきます。

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

ウェブページ上に掲載された「すべてのオブジェクト(画像などを含む)の読み込みが完了」した時点で何らかの処理をしたい場合は、onloadイベントに合わせてスクリプトが実行されるように記述する方法があります。
これには、例えば以下の記述方法があります。

どちらも効果は同じです。1ページだけでしか使わない場合は前者Aの方法が手軽です。が、後者Bの場合だと、HTMLとスクリプトを分離できるので、

  • 複数のページで同じ処理を行いたい場合に、共通のJavaScriptファイルに1回記述するだけで済むので楽。
  • HTML側にスクリプトを書く必要が無いので、管理が楽。

などのメリットがあります。

(A) HTMLでbody要素に「onload」属性を指定することで、読み込み完了時に処理をする方法

onload属性を使う場合は、以下のようにHTMLを書きます。

<body onload="firstscript();">

上記のように記述すれば、読み込みが完了した時点で、firstscript関数が実行されます。関数を別途用意するまでもない場合は、値に直接スクリプトを書くこともできます。

<body onload="alert('ページの読み込みが完了したよ!');">

このとき、onload属性の値を二重引用符(ダブルクォーテーション記号)で囲んでいるなら、中身のJavaScriptソース中で引用符が必要になった場合は、シングルクォーテーション記号を使います。ソース中でダブルクオーテーション記号を使ってしまうと、そこでonload属性の値が終わったと判断されてしまって、うまく動きません。

(B) JavaScriptソースに window.onloadメソッドを利用して、値に処理を書く

HTML側に手を加えずに、JavaScriptソース側だけで実現したい場合は、以下のようにJavaScriptを記述します。

window.onload = firstscript;

上記のように記述すれば、読み込みが完了した時点で、firstscript関数が実行されます。関数の中身は、例えば以下のように別途記述しておきます。

// 処理の中身
function firstscript() {
   alert('ページの読み込みが完了したよ!');
}

なお、この関数を「ページの読み込み直後」以外のシーンで使うことがないのであれば、わざわざ「別の関数」として定義せずに、以下のように無名関数として記述する方が楽です。

window.onload = function() {
   alert('ページの読み込みが完了したよ!');
}

上記の書き方だと、onloadイベントが発生した際に実行されるスクリプトの中身を直接記述していますので、ソースが短く分かりやすくなります。

ページの読み込みが完了した際に、文字列を変更するサンプル

以下にサンプルを掲載しておきます。上記のサンプルソースのようにalertを使うと少々煩いので、以下のサンプルではinnerHTMLを使って文字列を変更するだけにしています。

▼ページの読み込みが完了すると、表示が「NOW LOADING」から「PAGE LOADED」に変わります。

NOW LOADING...

まあ、先頭からここまで順に読み進めてきた場合は、上記の表示はとっくに「PAGE LOADED」になっているでしょうけども。(^_^;;;

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

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

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

  • できるだけ早く実行された方が望ましい。
  • でも、HTMLソースが読み終わるよりも前に実行されると困る。

という条件(制約)があります。
このような場合には、『HTMLソースの末尾にスクリプトを記述する』、または『HTMLソースの末尾で指定の関数を実行する』ように記述すれば実現できます。

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

</body>

この直前で、以下のようにスクリプト本体を書けば良いだけです。

   <script type="text/javascript">
      // HTMLを最後まで読み終わってから実行する処理
      alert("HTMLの読み込みが完了した瞬間です。");
   </script>
</body>

処理を関数にしている場合は、以下のようにして呼び出せば良いでしょう。

   <script type="text/javascript">
      // HTMLを最後まで読み終わってから実行する処理
      firstscript();
   </script>
</body>

もし、実行したい処理が外部のJavaScriptファイルに存在する場合(※この用途ではたいていそうでしょう)は、以下のように、HTMLソースの末尾でJavaScriptファイルを読み込めば良いです。

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

要するに、特に「onload」などのイベントには合わせずに、HTMLソース内に直接スクリプトを記述すれば(または関数を呼び出す記述を書けば)、そこを読み込んだ瞬間に実行されるわけです。なので、HTMLソースの末尾にスクリプトを書けば、HTMLが最後まで読み込まれた段階で(※ページ内の画像など「その他のオブジェクト」の読み込みが済んでいるかどうかに関係なく)すぐに実行されます。

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

というわけで、ここまで来ればもう説明するまでもないかも知れませんが、『ウェブページが読み込まれるよりも前』(読み込みが完了するよりも前)に何らかの処理を実行したいなら、HTMLソースの先頭付近にスクリプトを書けば良いわけです。
つまりは、以下のようにhead要素の中にでも書いておけば良いでしょう。

<head>
   <script type="text/javascript">
      // ページの読み込み完了を待たずに即実行する処理
      firstscript();
   </script>
    : : : 
</head>

HTMLソース内に直接スクリプトを書きたくない場合は、head要素内で外部のJavaScriptファイルを読み込めば、HTMLの読み込み完了を待たずに実行されます。
このケースは一番需要がなさそうですが、一番スタンダードな(初級教科書に載っているような)方法ですね。(^_^;;;

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

というわけで、ウェブページの読み込み動作とタイミングを合わせて何か処理したい場合の方法3種類の紹介でした。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど