画像プリロードの仕方

CGIテクニック集トップへ





概要

Javascriptを利用し、順番に表示されるシステムで次の画像を予めブラウザに読み込み、その画像が実際表示される際にキャッシュから読み込むことにより短時間で表示させる方法です。アルバム3等で利用されています。

必用な処理

  1. onLoadにより次の画像ファイル名をページがロードされた際に実行するJavascriptに渡す
  2. Javascriptで画像ファイルを一つ読み込む

サンプルコード

 print <<END;
 <head>
 <script language="Javascript">
 nextimage = new Image();
 function preload(nextpic){
        if (nextpic != ''){
                nextimage.src = nextpic;
        }
 }
 </script>
 </head>
 END
 
 print "<BODY onLoad=\"preload(\'$nextimage\')\">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       \n";
 
 print "<a href=\"$nextimage\">次の画像</a>\n";

コードの解説

 print <<END;
 <head>
 <script language="Javascript">
 nextimage = new Image();
 function preload(nextpic){
        if (nextpic != ''){
                nextimage.src = nextpic;
        }
 }
 </script>
 </head>
 END

この部分はHTMLの<head>タグで囲まれる部分に含まれます。nextimageをImageオブジェクトとして定義します。preload関数を定義し渡された画像ファイルnextpicをnextimage.srcに読み込むことでその画像をロードします。この処理自体は現在開かれているページでは何も作用しません。バックグランドで画像ファイルが読み込まれるだけです。

 print "<BODY onLoad=\"preload(\'$nextimage\')\">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       \n";

<body> タグ内にonLoadでJavascriptのpreloadを起動します。この時にブラウザにロードしたい画像ファイル$nextimgaeをJavascriptに渡します。

 print "<a href=\"$nextimage\">次の画像</a>\n";

このリンクをクリックしたときに$nextimgaeはブラウザのキャッシュから読み込まれます。

関連するCGIテクニック

画像サイズの取得
Image::Sizeを使って画像サイズを取得する方法
画像サイズ変更の仕方
サムネイルの作り方
画像ファイルサイズを制限したサムネイルの作り方
Exif情報の取得の仕方