var img = new Image();
img.src = "images/myFolder/myImage.png";
The above will only load myImage.png. How to load all images of myFolder?
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. Save this answer.
Scroll down the start menu and click on File Explorer. Alternatively, you can simply type “File Explorer” in the search bar in the bottom left corner, right next to the Windows icon. Click on Pictures on the left pane. At this point, you should see all the sub-folders under Pictures.
At first, we imported the pathlib module from Path. Then we pass the directory/folder inside Path() function and used it . glob('*. png') function to iterate through all the images present in this folder.
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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With