How can I load all images in a folder?

Question

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

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

They are a sequence of 0.png, 1.png, but I don't know when the sequence will end in a given folder. — MaiaVictor, Jun 21 '12 at 18:17

Yuriy Galanter · Answer 1 · 2012-06-21T19:45:49.423

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

This could work but can somebody tell how to do this using a while or for loop? — HolyResistance, May 10 '20 at 22:57

score 11 · Accepted Answer · answered Jun 21 '12 at 18:17

11

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.

answered Jun 21 '12 at 18:17

tskuzzy

35,812
14
73
140

score 1 · Answer 3 · answered Jun 21 '12 at 18:17

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.

score 0 · Answer 4 · answered Jun 21 '12 at 18:18

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.

How can I load all images in a folder?

4 Answers4

Linked