2007年5月16日(水) 13時48分19秒 [イベント]
読み込みが完了したら何かする
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を付加しています。
こんな感じで、「読込完了を待ってから何かを実行する」ことが可能です。
この日記へのコメントはお気軽に！ コメント数:0 トラックバック数:0
| « 今日の日付・時刻を表示する |
前後のエントリ < 旧 ／ 新 > | 「このページを印刷」ボタンを作る » |
JavaScript TIPS 主要なカテゴリ
現在、以下のカテゴリに区分してTIPSを公開しています。