Comment charger dynamiquement des images à partir d'un dossier à l'aide de jQuery/JavaScript ?

Chargement dynamique d'images à partir d'un dossier à l'aide de jQuery/JavaScript

Parcourir des dossiers pour charger des éléments tels que des images peut être difficile lorsque leurs noms ne sont pas séquentiel. Cependant, jQuery fournit une solution pour récupérer et afficher des images de n'importe quel répertoire.

Solution :

La mise en œuvre de cette solution implique d'utiliser un appel AJAX pour récupérer le contenu de la cible. dossier :

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

Cette approche utilise jQuery pour analyser la réponse HTML de l'appel AJAX. Il parcourt ensuite les balises d'ancrage dans la réponse, filtrant uniquement celles se terminant par des extensions de fichier image prises en charge. Enfin, il ajoute dynamiquement ces chemins d'image validés au DOM.

Remarque :

Pour que cette solution fonctionne efficacement, il est crucial de configurer votre serveur pour autoriser les listes de dossiers. . Sur les serveurs Apache, l'option "Index" doit être activée. Pour Express.js et Node.js, un package externe nommé « serve-index » peut être utilisé pour obtenir la même fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!