Comment charger dynamiquement des images d'un dossier dans une page Web à l'aide de jQuery/JavaScript ?

Chargement d'images d'un dossier dans une page Web à l'aide de jQuery/JavaScript

Question :

Comment pouvons-nous charger dynamiquement toutes les images d'un dossier spécifique dans une page HTML en utilisant jQuery/JavaScript, même lorsque les noms d'images ne sont pas séquentiels ?

Réponse :

Pour y parvenir, nous pouvons utilisez AJAX et une technique intelligente pour identifier les fichiers image dans le dossier souhaité.

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

Explication :

• AJAX est utilisé pour récupérer le contenu du Dossier "images".
• Les données de réponse sont analysées à l'aide de jQuery pour localiser les balises d'ancrage () qui représentent les fichiers dans le dossier.
• Nous parcourons les balises d'ancrage et vérifions si les noms de fichiers ont l'une des extensions d'image prises en charge (par exemple, JPEG, PNG, GIF).
• Pour chaque image valide, nous créons dynamiquement un fichier balise et ajoutez-la au corps de la page HTML.