JavaScript：如何加載文件夾中的所有圖像？

Question

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

以上只會加載myImage.png。 如何加載myFolder的所有圖像？

Answer 1

如果您的圖像名稱是如您所說的順序，則可以為名稱創建一個循環，在每次迭代時檢查圖像是否存在 - 如果不存在 - 則打破循環：

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

Answer 2

JavaScript無法直接訪問文件系統的內容。 您必須首先使用服務器端腳本（用PHP編寫等）傳遞內容。

然后，一旦有了這個，就可以在JavaScript中使用循環來單獨加載它們。

Answer 3

您需要一些方法來獲取該文件夾中的文件列表。 這可以手動定義為數組，也可以通過AJAX請求檢索到為您列出文件的服務器端腳本。 無論哪種方式，都沒有“神奇”的方法來獲取文件夾中的所有圖像。

Answer 4

如果您擁有文件夾中文件的所有名稱，則需要循環瀏覽並按名稱打開每個圖像。 你不能直接加載整個文件夾，你不能在Javascript中訪問文件系統來獲取名稱，你需要通過像PHP這樣的東西將它們傳遞給頁面。