JavaScript: ¿cómo cargar todas las imágenes en una carpeta?

Question

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

Lo anterior solo cargará myImage.png. ¿Cómo cargar todas las imágenes de myFolder?

Answer 1

JavaScript no puede acceder directamente al contenido de un sistema de archivos. Tendrás que pasar los contenidos usando un script del lado del servidor (escrito en PHP, etc.) primero.

Luego, una vez que tenga eso, puede usar un bucle en su JavaScript para cargarlos individualmente.

Answer 2

Necesita alguna forma de obtener la lista de archivos en esa carpeta. Esto puede definirse manualmente como una matriz o recuperarse mediante una solicitud AJAX a una secuencia de comandos del lado del servidor que enumera los archivos por usted. De cualquier manera, no hay un método "mágico" para obtener todas las imágenes en una carpeta.

Answer 3

Si tiene todos los nombres de los archivos en la carpeta, tendrá que recorrer y abrir cada imagen por su nombre. No puedes simplemente cargar la carpeta completa directamente y no puedes acceder al sistema de archivos en Javascript para obtener los nombres, tendrás que pasarlos a la página a través de algo como PHP.

Answer 4

Si sus nombres de imagen son secuenciales como tu dicho, puede crear un bucle para los nombres, comprobando en cada iteración si existe imagen - y si no lo hace - romper el bucle:

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