JavaScript: Wie lade ich alle Bilder in einem Ordner?

Question

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

Das obige lädt nur myImage.png. Wie lade ich alle Bilder von myFolder?

Answer 1

JavaScript kann nicht direkt auf den Inhalt eines Dateisystems zugreifen. Sie müssen den Inhalt zuerst mit einem serverseitigen Skript (in PHP usw. geschrieben) übergeben.

Dann, sobald Sie das haben, können Sie eine Schleife in Ihrem JavaScript verwenden, um sie einzeln zu laden.

Answer 2

Sie benötigen eine Möglichkeit, um die Liste der Dateien in diesem Ordner zu erhalten. Dies kann entweder manuell als Array definiert werden oder durch eine AJAX-Anfrage an ein serverseitiges Skript, das die Dateien für Sie auflistet. In beiden Fällen gibt es keine "magische" Methode, um alle Bilder in einen Ordner zu bekommen.

Answer 3

Wenn Sie alle Namen der Dateien in dem Ordner haben, müssen Sie jedes Bild durch den Namen durchlaufen und öffnen. Sie können nicht einfach den gesamten Ordner direkt laden und Sie können nicht auf das Dateisystem in Javascript zugreifen, um die Namen zu erhalten, Sie müssen sie über etwas wie PHP an die Seite übergeben.

Answer 4

Wenn Ihr Bildname sequentiell ist wie Sie gesagt, können Sie eine Schleife für die Namen erstellen, bei jeder Iteration zu überprüfen, ob Bild vorhanden ist - und wenn es nicht - bricht die Schleife:

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