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; 
}