Wie lade ich Bilder mithilfe von jQuery/JavaScript dynamisch aus einem Ordner in eine Webseite?

Bilder aus einem Ordner mit jQuery/JavaScript in eine Webseite laden

Frage:

Wie können wir dynamisch laden? Alle Bilder aus einem bestimmten Ordner mithilfe von jQuery/JavaScript in eine HTML-Seite einfügen, auch wenn die Bildnamen nicht sequenziell sind?

Antwort:

Um dies zu erreichen, können wir Verwenden Sie AJAX und eine clevere Technik, um Bilddateien im gewünschten Ordner zu identifizieren.

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

• AJAX wird verwendet, um den Inhalt abzurufen Ordner „images“.
• Die Antwortdaten werden mit jQuery analysiert, um Ankertags () zu finden, die Dateien im Ordner darstellen.
• Wir durchlaufen die Ankertags und prüfen, ob Die Dateinamen haben eine der unterstützten Bilderweiterungen (z. B. JPEG, PNG, GIF).
• Für jedes gültige Bild erstellen wir dynamisch ein Tag und hängen Sie es an den Text der HTML-Seite an.