Wie lade ich Bilder dynamisch aus einem Verzeichnis mit nicht aufeinanderfolgenden Dateinamen mithilfe von jQuery/JavaScript?

Dynamisches Laden von Bildern aus einem Verzeichnis mit jQuery/JavaScript

Frage:

Ich brauche um mehrere Bilder aus einem Ordner namens „images“ in meine Webseite zu laden. Allerdings sind die Bilddateinamen keine aufeinanderfolgenden Ganzzahlen. Wie kann ich dies mit jQuery oder JavaScript erreichen?

Antwort:

Das folgende Code-Snippet lädt alle Bilder aus dem Ordner „images“ in den Hauptteil des HTML-Seite:

<code class="javascript">var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});</code>

Erklärung:

Der Code beginnt mit der Erstellung einer Ordnervariablen, die den Pfad zum Ordner „images“ enthält. Anschließend wird die jQuery-Funktion $.ajax() verwendet, um den Inhalt des Ordners zu laden. Die Erfolgsrückruffunktion durchläuft die zurückgegebenen Daten, um zu prüfen, ob die Dateierweiterung mit den akzeptierten Dateitypen (.jpg, .jpeg, .png, .gif) übereinstimmt. Wenn dies der Fall ist, erstellt die Funktion ein Bildelement mit dem entsprechenden Quellattribut und hängt es an den Hauptteil der Seite an.

Hinweis:

• Dieser Code geht davon aus, dass auf dem Apache-Server die Funktion „Optionsindizes“ aktiviert ist.
• Für andere Server wie Express for Node kann das NPM-Paket „serve-index“ verwendet werden, um Verzeichnislisten zu ermöglichen.
• Die Der Code kann erweitert werden, indem weitere akzeptierte Dateitypen hinzugefügt oder die Serverkonfiguration geändert werden, um Verzeichnislisten zu ermöglichen.

Das obige ist der detaillierte Inhalt vonWie lade ich Bilder dynamisch aus einem Verzeichnis mit nicht aufeinanderfolgenden Dateinamen mithilfe von jQuery/JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!