How can I load all images in a folder?
35,538
Solution 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.
Solution 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;
}
Solution 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.
Author by
MaiaVictor
Updated on August 10, 2022Comments
-
MaiaVictor almost 2 years
var img = new Image(); img.src = "images/myFolder/myImage.png";
The above will only load myImage.png. How to load all images of myFolder?