JavaScript: how to load all images in a folder?

问题

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

The above will only load myImage.png. How to load all images of myFolder?

回答1:

JavaScript can't directly access the contents of a file system. You'll have to pass the contents using a server-side script (written in PHP, etc) first.

Then once you have that, you can use a loop in your JavaScript to load them individually.

回答2:

If your image names are sequential like your said, you can create a loop for the names, checking at every iteration if image exists - and if it doesn't - break the loop:

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

回答3:

You need some way to get the list of files in that folder. This can either be defined manually as an array, or retrieved by an AJAX request to a server-side script that lists the files for you. Either way, there no "magic" method to get all the images in a folder.

回答4:

If you have all the names of the files in the folder, you'll need to loop through and open each image by name. You can't just load the whole folder directly and you can't access the file system in Javascript to get the names, you'll need to pass them to the page via something like PHP.

来源：https://stackoverflow.com/questions/11144261/javascript-how-to-load-all-images-in-a-folder