Wie lade ich Bilder dynamisch aus einem Ordner mit jQuery/JavaScript?

Bilder dynamisch aus einem Ordner mit jQuery/JavaScript laden

Das Navigieren in Ordnern zum Laden von Assets wie Bildern kann schwierig sein, wenn deren Namen nicht sequentiell. Allerdings bietet jQuery eine Lösung zum Abrufen und Anzeigen von Bildern aus jedem Verzeichnis.

Lösung:

Die Implementierung dieser Lösung erfordert die Verwendung eines AJAX-Aufrufs, um den Inhalt des Ziels abzurufen Ordner:

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

Dieser Ansatz verwendet jQuery, um die HTML-Antwort aus dem AJAX-Aufruf zu analysieren. Anschließend werden die Ankertags in der Antwort durchlaufen und nur diejenigen herausgefiltert, die mit unterstützten Bilddateierweiterungen enden. Abschließend werden diese validierten Bildpfade dynamisch an das DOM angehängt.

Hinweis:

Damit diese Lösung effektiv funktioniert, ist es wichtig, Ihren Server so zu konfigurieren, dass er Ordnerlisten zulässt . Bei Apache-Servern sollte die Option „Indizes“ aktiviert sein. Für Express.js und Node.js kann ein externes Paket namens „serve-index“ verwendet werden, um die gleiche Funktionalität zu erreichen.

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