2011年10月03日

複数の画像をあらかじめ読み込む。プリロード(プレロード)

スポンサード リンク

 画像のプリロード(プレロード)
イメージオブジェクト

 例えばこのサンプルのような画像の切り替えでクリックしてから
画像を読み込んでいたら、回線が混んでいる場合など、
クリックしてから画像を読み込むまでに時間がかかるため、タイムラグが生じ
スムーズに画像が表示されない事があります。これを回避するために
ページ読み込み時に併せて
画像ファイルを読み込ませておきます。これがプリロード(プレロード)です。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
<head>
<title>複数の画像をあらかじめ読み込む。プリロード(プレロード)</title>
<script language="JavaScript">
<!--
     var imgFile= new Array(); //画像ファイル 配列変数。
  imgFile[0]="../image/hana.gif";
  imgFile[1]="../image/sunset.gif";
  imgFile[2]="../image/raketto.gif";
  imgFile[3]="../image/influ2l.jpg";
  imgFile[4]="../image/influ3l.jpg";

     var prImg= new Array();
  for (i=0; i<imgFile.length; i++){ //imgFile.length はその個数。
   prImg[i] = new Image();//新しいイメージ(画像)オブジェクトを生成
    prImg[i].src = imgFile[i];//srcプロパティで画像ファイルのアドレス(URL)を設定。
       }
    var num = 0; //画像の番号。
  function cngImg(){
   num++;//番号を1進める。
    Len=imgFile.length;
  if (num == Len) // 番号が配列の個数になったら
   { num=0; }   // 0にする。
    document.getElementById('gazo').src =imgFile[num];//画像の切り替え
   }
// -->
</script>
</head>
<body>
  <a href="javascript:void(0)" onFocus="this.blur()" onclick="cngImg()">
   <img src="..image/hana.gif" id="gazo" width="300" height="300" border="0">
    </a>
</body>
</html>
prImg = new Image()
 プレロード(画像の先読み) 画像(イメージ)オブジェクト。
基本は簡単です。新しい画像オブジェクトを生成し
それに対して、srcプロパティで画像ファイルのアドレス(URL)を設定。
prImg = new Image(); //画像オブジェクト作成。
prImg.src = "***.gif"; とすれば画像が読み込まれます。


複数の画像をプレロードするには、配列変数に読み込む画像ファイル名を入れます。
prImg= new Array();
for(i=0; i<imgFile.length; i++){
//imgFileは配列変数。lengthはその個数。
prImg[i] = new Image();//画像オブジェクト作成。
 prImg[i].src = imgFile[i];
//画像ファイルのアドレス(URL)を設定。
  }
プレロードの確認
 画像がロードされているならキャッシュされているはずなので
「インターネット一時ファイル」を観れば判ります。
IE なら 「ツール」⇒「インターネットオプション」⇒「全般」⇒
「閲覧の履歴 "インターネット一時ファイル"」⇒「設定」⇒「ファイル表示」で
画像ファイル名があれば先読みが完了しています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
画像のズームアップ 初歩編
ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
CSSだけでおこなう、画像の入れ替えとポップアップ
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
ローテーションバナー
ページを開いたときに画像がフェードインします。IE6,Mozilla Firefox

posted by javaScript at 19:43 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。