JavaScript：フォルダ内のすべての画像を読み込む方法は？

Question

var img = new Image(); 
img.src = "images/myFolder/myImage.png"; 

上記はmyImage.pngのみをロードします。 myFolderのすべての画像を読み込むには？

Answer 1

JavaScriptはファイルシステムの内容に直接アクセスできません。まず、PHPなどで書かれたサーバー側のスクリプトを使用してコンテンツを渡す必要があります。

その後、JavaScriptをループして個別に読み込むことができます。

Answer 2

そのフォルダ内のファイルのリストを取得するには、何らかの方法が必要です。これは、配列として手動で定義することも、ファイルをリストするサーバー側のスクリプトにAJAX要求で取得することもできます。どちらの方法でも、フォルダ内のすべての画像を取得する「魔法」の方法はありません。

Answer 3

フォルダ内のファイルの名前がす​​べてある場合は、各イメージをループして名前で開く必要があります。フォルダ全体を直接読み込むだけでは、Javascriptのファイルシステムにアクセスして名前を取得することはできません.PHPのようなものを経由してページに渡す必要があります。

Answer 4

自分のイメージ名があなたの言ったように連続している場合は、画像が存在する場合、各反復でチェック、名前のループを作成することができます - とそうでない場合は - ループを破る：

var bCheckEnabled = true; 
var bFinishCheck = false; 

var img; 
var imgArray = new Array(); 
var i = 0; 

var myInterval = setInterval(loadImage, 1); 

function loadImage() { 

    if (bFinishCheck) { 
     clearInterval(myInterval); 
     alert('Loaded ' + i + ' image(s)!)'); 
     return; 
    } 

    if (bCheckEnabled) { 

     bCheckEnabled = false; 

     img = new Image(); 
     img.onload = fExists; 
     img.onerror = fDoesntExist; 
     img.src = 'images/myFolder/' + i + '.png'; 

    } 

} 

function fExists() { 
    imgArray.push(img); 
    i++; 
    bCheckEnabled = true; 
} 

function fDoesntExist() { 
    bFinishCheck = true; 
}