M11 写真セレクターと画像の先行読み込み処理

ボタンに触ると画像が切り替わり、クリックすると指定したリンクを読み込みます(リンク先のページは省略しました(^^;;)。
写真セレクターへのリンクを書いてある前ページへ先行読み込みスクリプトを記述すると、写真セレクターのページでの読み込み時間が大幅に短縮されます。ただし、記述する場所はbodyタグの一番最後にしてください。普段通りhead内に記述したりすると、前のページの表示が遅くなってしまいます^^;;。bodyタグの最後ならページは普通に表示された上で本文を読んでいる間に次のページ(写真セレクター)の先行読み込みをやってくれるかたちになります(^^)。

Sample

写真セレクターのページへ行きます

Source

ソース
(コピーしてお使いください)

<html>
<head>
<title></title>

<script language="JavaScript">
<!--

//画像処理ここから--------------------------------------------


/*
photo画像の事前読み込み
ここの画像ファイルを取り替えるとオリジナルになります。
*/
if(document.images)
{
  movimg=new Array()
  movimg[0] = new Image();movimg[0].src='HATUHI.GIF';
  movimg[1] = new Image();movimg[1].src='HAKEN.GIF';
  movimg[2] = new Image();movimg[2].src='BOTAN.GIF';
  movimg[3] = new Image();movimg[3].src='ISHI.GIF';
  movimg[4] = new Image();movimg[4].src='HOKUSAI.GIF';
  movimg[5] = new Image();movimg[5].src='HONB.GIF';
  movimg[6] = new Image();movimg[6].src='HOZAKI.GIF';
  movimg[7] = new Image();movimg[7].src='KAWARA.GIF';
  movimg[8] = new Image();movimg[8].src='CHOZU.GIF';
  movimg[9] = new Image();movimg[9].src='TEIEN.GIF';
}

/*
ボタンイメージの事前読み込みだよん
このボタンイメージを取り替えればオリジナルボタンになります

  ここではB0ON.GIF,B1ON.GIF,B2ON.GIF.....
  という風に連番のファイル名を付けて使っています。

*/
if(document.images)
{
  //まずonボタンイメージを10枚
  Bonimg = new Array();
  for(i=0;i<10;i++)
  {
    Bonimg[i] = new Image();
    Bonimg[i].src = "B"+i+"ON.GIF";
  }

  //次にoffボタンイメージを10枚
  Boffimg = new Array();
  for(j=0;j<10;j++)
  {
    Boffimg[j] = new Image();
    Boffimg[j].src = "B"+j+"OF.GIF";
  }
}

//ボタン画像のon/offとサンプル写真の書き換え
function Bon(Bno)
{
  if(document.images)
  {
    document.images['B'+Bno].src=Boffimg[Bno].src;
   document.dai.src=movimg[Bno].src;
  }
}

function Boff(Bno)
{
  if(document.images)
  {
    document.images['B'+Bno].src=Bonimg[Bno].src;
  }
}

//画像処理ここまで--------------------------------------

//リンク処理ここから------------------------------------

//リンク先のBASE HREFがあれば設定(HTMLと同じなら"")
var LinkHref1=""    ;

/*
リンク先の設定
*/
LinkURL=new Array()
LinkURL[0]=LinkHref1+"LINKP0.HTM"
LinkURL[1]=LinkHref1+"LINKP1.HTM"
LinkURL[2]=LinkHref1+"LINKP2.HTM"
LinkURL[3]=LinkHref1+"LINKP3.HTM"
LinkURL[4]=LinkHref1+"LINKP4.HTM"
LinkURL[5]=LinkHref1+"LINKP5.HTM"
LinkURL[6]=LinkHref1+"LINKP6.HTM"
LinkURL[7]=LinkHref1+"LINKP7.HTM"
LinkURL[8]=LinkHref1+"LINKP8.HTM"
LinkURL[9]=LinkHref1+"LINKP9.HTM"

function meirei(Bno)
{
  if(document.images)
  {
    window.location.href=LinkURL[Bno]
  }
}

//リンク処理ここまで------------------------------------

//-->
</script>

</head>

</body>
<center>

<!--画像の構築-->
<a
   href="javascript:meirei(0)"
   onMouseOver="Bon(0)"  onMouseOut="Boff(0)"
><img
   border=0 name="B0"
   src="B0ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(1)"
   onMouseOver="Bon(1)"  onMouseOut="Boff(1)"
><img
   border=0 name="B1"
   src="B1ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(2)"
   onMouseOver="Bon(2)"  onMouseOut="Boff(2)"
><img
   border=0 name="B2"
   src="B2ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(3)"
   onMouseOver="Bon(3)"  onMouseOut="Boff(3)"
><img
   border=0 name="B3"
   src="B3ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(4)"
   onMouseOver="Bon(4)"  onMouseOut="Boff(4)"
><img
   border=0 name="B4"
   src="B4ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(5)"
   onMouseOver="Bon(5)"  onMouseOut="Boff(5)"
><img
   border=0 name="B5"
   src="B5ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(6)"
   onMouseOver="Bon(6)"  onMouseOut="Boff(6)"
><img
   border=0 name="B6"
   src="B6ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(7)"
   onMouseOver="Bon(7)"  onMouseOut="Boff(7)"
><img
   border=0 name="B7"
   src="B7ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(8)"
   onMouseOver="Bon(8)"  onMouseOut="Boff(8)"
><img
   border=0 name="B8"
   src="B8ON.GIF"
   width="12" heigth="24"
></a><a
   href="javascript:meirei(9)"
   onMouseOver="Bon(9)"  onMouseOut="Boff(9)"
><img
   border=0 name="B9"
   src="B9ON.GIF"
   width="12" heigth="24"
></a><br>
<img
  border=0 name="dai"
  src="KAWARA.GIF"
  width="120" heigth="80"><br>

</center>
</body>
</html>


写真セレクターを置く前のページの
BODYの一番最後に以下のスクリプトを置いてください
このサンプルでは、このページ(SIMPLM11.HTM)のBODYタグの一番最後に
記述してあります。


<script language="JavaScript">
<!--


/*
photo画像の事前読み込み
ここの画像ファイルを取り替えるとオリジナルになります。
*/
if(document.images)
{
  movimg=new Array()
  movimg[0] = new Image();movimg[0].src='HATUHI.GIF';
  movimg[1] = new Image();movimg[1].src='HAKEN.GIF';
  movimg[2] = new Image();movimg[2].src='BOTAN.GIF';
  movimg[3] = new Image();movimg[3].src='ISHI.GIF';
  movimg[4] = new Image();movimg[4].src='HOKUSAI.GIF';
  movimg[5] = new Image();movimg[5].src='HONB.GIF';
  movimg[6] = new Image();movimg[6].src='HOZAKI.GIF';
  movimg[7] = new Image();movimg[7].src='KAWARA.GIF';
  movimg[8] = new Image();movimg[8].src='CHOZU.GIF';
  movimg[9] = new Image();movimg[9].src='TEIEN.GIF';
}

//-->
</script>




使用している画像:

B0ON.GIF B1ON.GIF B2ON.GIF B3ON.GIF B4ON.GIF 
B5ON.GIF B6ON.GIF B7ON.GIF B8ON.GIF B9ON.GIF 
B0OF.GIF B1OF.GIF B2OF.GIF B3OF.GIF B4OF.GIF 
B5OF.GIF B6OF.GIF B7OF.GIF B8OF.GIF B9OF.GIF 

HATUHI.GIF HAKEN.GIF BOTAN.GIF 
ISHI.GIF HOKUSAI.GIF HONB.GIF 
HOZAKI.GIF KAWARA.GIF CHOZU.GIF TEIEN.GIF