|
|
Tweet
概要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情報の取得の仕方 |