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

読み込みが完了したら何かする

JavaScriptを使うと、ページや画像の読込完了を待ってから、何か特定の処理を実行させることができます。例えば、以下のボックスは、最初は「読込中…」と表示されていますが、ボックスに含まれる画像の読み込みが完了したら「読込完了」という表示に変わります。

読み込みが完了するとJavaScriptを実行する画像

ただいま画像を読み込み中…

▲上記の画像が表示されたら、画像右側の文字が変化します。

画像のサイズが小さいので、高速回線だと変化が見えないかも知れませんが…。

このように、「画像の読み込みが完了したとき」や、「ページそのものの読み込みが完了したとき」を待って、何らかのJavaScriptを実行させることができます。用途としては、

  • 待ち時間を紛らわす表示を行う
  • 読み込みが完了していないとエラーになってしまうスクリプトを使う (=読み込み完了を待ってから実行されるようにする)

…といったことが考えられます。
実現は非常に簡単で、body要素やimg要素に対して、onload属性を加えるだけです。

ページの読込完了時にスクリプトを実行する

例えば、「ページの読込完了時に firstwork関数を実行するなら、以下のように記述します。

<body onload="firstwork();"> ~

もちろん、firstwork関数は、あらかじめ作成しておく必要があります。例えば、以下のように。

function firstwork() {
   document.bgColor = "#ccffcc";
}

上記のようなJavaScriptを用意しておき、先ほどのHTMLソースのようにbody要素を書いておけば、ページ読み込み完了と同時に、ページの背景色が淡い緑色(#ccffcc)に変わります。

画像の読込完了時に何か処理を行う

冒頭のサンプルで使った「画像が読み込まれたら文字を変化させる」処理は、以下のようなHTMLとJavaScriptで実現できます。
まずは、JavaScript。

<script type="text/javascript"><!--
function ImageGuide() {
   document.getElementById('imagemessage').innerHTML = '読込完了';
}
// --></script>

次に、今書いたスクリプトを呼び出すHTML。

<div>
   <img src="seabed.jpg" alt="海底" onload="ImageGuide();" />
   <p id="imagemessage">ただいま画像を読み込み中…</p>
</div>

先にJavaScriptで、ImageGuide関数を作成しています。このスクリプトは、「imagemessage」というidの振られた要素の文字列を変化させる処理を行います。
HTMLでは、img要素で画像を表示していて、その中にonload属性で先ほどのスクリプト(ImageGuide関数)を呼び出しています。ですから、画像の表示が完了したら、ImageGuide関数が実行されます。
そして、ImageGuide関数が対象とする文字列を、最後にp要素で記述しています。「id="imagemessage"」と記述して、idを付加しています。

こんな感じで、「読込完了を待ってから何かを実行する」ことが可能です。

JavaScript TIPS 主要なカテゴリ

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

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

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

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