読み込みに時間のかかる画像がある場合、画像の読み込み中にステータスバーにメッセージを表示させることができます。ここでは、画像の読み込み中にステータスバーにスクロールメッセージを表示し、画像の読み込みが完了した時点で別のメッセージに切り替える方法を考えましょう。
HTMLのヘッダー部分でステータスバーに表示する文字列の定義を行います。<script language="JavaScript">
<!--
now = new Date();
if ( now.getYear() >= 2000 ){ document.write(now.getYear(),"年") }
else { document.write(now.getYear()+1900,"年") }
document.write(now.getMonth()+1,"月",now.getDate(),"日");
document.write(now.getHours(),"時",now.getMinutes(),"分");
document.write(now.getSeconds(),"秒");
//-->
</script>ステータスバーに文字を表示するには、まず最初に目的の文字列を変数に格納し、画像が読み込まれたことを判断する値とタイマーを識別する値をそれぞれ変数に格納します。
画像の読み込みが完了するまで、ステータスバーに表示したメッセージがスクロールを繰り返すように定義します。
function StsScroll(){
clearTimeout(timerID);
window.status=msg;
msg=msg.substring(1,msg.length)+msg.substring(0,1);
if(flag==0)
timerID=setTimeout("StsScroll()",200);
else
window.status="画像の読み込みが完了しました";
}
function stopScroll(){
flag=1;
}
</SCRIPT>
</HEAD>画像の読み込みが完了したタイミングで、メッセージを切り替えるための関数を呼び出すように設定します。
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" onLoad="stopScroll()">
「onLoad」とは、ページの読み込みが完了した時に発生するイベントです。「onLoad」イベントを使うと、ページの読み込みが完了したタイミングで任意の処理を行わせることができます。例では、「onLoad」イベントを使うことで、ページが読み込まれる間にステータスバー上でスクロールさせていたメッセージを、ページの読み込みが完了した時点で別のメッセージへ切り替えるように設定しています。
メッセージの文字数が多いと、すべての文字列が表示される前に画像の読み込みが完了してしまうことがあるので、ファイルサイズの小さい画像の場合は、メッセージの文字数を少なめにしておく必要があります。また文字列のスクロールのスピードは1000分の１秒単位で設定することができるので、メッセージの文字数や画像ファイルが読み込まれるまでの時間を計算して、最適なスピードに調整してください。
注：例では、スクリプト中にタイマー設定しているところが2箇所あるので、時間の設定を変更する場合は2箇所とも変更する必要があります。
