指定したフォルダの画像を一括でプリロードしたい

質問

ページが表示されたときに、指定した画像をプリロードするようjavascriptで実装しています。
preloadの引数に１つ１つプリロードしたいファイルを書いていかないといけないので
ファイル数が多くなると手間です。

例えば
img/photo1.jpg
img/photo2.jpg
img/thumb.jpg

image/photo1.jpg
image/photo2.jpg
image/thumb.jpg

という具合にimgとimageのフォルダがあってimgにだけある画像ファイル全てを一括でプリロード
したいです。どのようなソースをかけばいいでしょうか？
また、指定したフォルダ以下の画像ファイルを一括でプリロードする関数などがあるのでしょうか？

function preload(imgs){
　　for(var i = 0; i < imgs.length; i++){
　　　var imgObj = new Image();
　　　imgObj.src = imgs[i];
　　 }
}
preload(["./img/photo1.jpg", "./img/photo2.jpg", "./img/photo3.jpg"]);

回答No.2

LancerVII · ベストアンサー

こんにちは。

#1です。
外部jsファイルの場合は外部jsファイルを動的に作ってあげる必要があります。
HTMLからの呼び出し方法
<script type="text/javascript" src="js.php"></script>

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7544030/

==== js.php
<?php
header ( 'Content-type: application/x-javascript' );
$qaDirs = dir ( './img/' );
$i = 0;
$js = "var fileList = new Array();\n";
while ( false !== ($file = $qaDirs->read()) ) {
if ( $file !== '.' && $file !== '..' ) {
$js .= "fileList[$i] = \"img/" . $file . "\";\n";
$i ++;
}
}
$qaDirs->close();
?>
window.onload = function() {
<?= $js ?>
var list = '';
for ( var i = 0; i < fileList.length; i ++ ) {
list += fileList[i] + '<br>';
}
document.getElementById('filelist').innerHTML = list;
}

お礼

javascriptだけでは指定したフォルダを一括プリロードできないんですか。。。
残念です。

回答No.1

LancerVII

こんにちは。

JavaScriptのみでは無理です。
ブラウザ上で動く言語であって、サーバ上のあれこれは出来ません。

やるとしたらPHP等のサーバ側で動く言語を利用してページのHTMLを生成する際に、フォルダ内のファイル一覧を取得してファイル名をJavaScriptの配列として書き出す方法が考えられます。
そうすれば、HTMLがクライアント側に送信された時にはファイル名が自動的に生成されます。

あとは、HTML内から画像ファイル名を引っ張ってとかあるかもしれませんが、HTML内に書いておくのも手間ですよね。