Comment charger dynamiquement des images à partir d'un répertoire avec des noms de fichiers non consécutifs à l'aide de jQuery/JavaScript ?

Chargement dynamique d'images à partir d'un répertoire à l'aide de jQuery/JavaScript

Question :

J'ai besoin pour charger plusieurs images d'un dossier nommé "images" dans ma page Web. Toutefois, les noms de fichiers image ne sont pas des entiers consécutifs. Comment puis-je y parvenir en utilisant jQuery ou JavaScript ?

Réponse :

L'extrait de code suivant chargera toutes les images du dossier "images" dans le corps du Page HTML :

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

Le code commence par créer une variable de dossier qui contient le chemin d'accès au dossier "images". Ensuite, il utilise la fonction jQuery $.ajax() pour charger le contenu du dossier. La fonction de rappel de réussite parcourt les données renvoyées pour vérifier si l'extension de fichier correspond aux types de fichiers acceptés (.jpg, .jpeg, .png, .gif). Si tel est le cas, la fonction crée un élément d'image avec l'attribut source approprié et l'ajoute au corps de la page.

Remarque :

• Ce code suppose que la fonctionnalité Option Indexes est activée sur le serveur Apache.
• Pour d'autres serveurs comme Express for Node, le package NPM 'serve-index' peut être utilisé pour autoriser les listes de répertoires.
• Le le code peut être étendu en ajoutant des types de fichiers plus acceptés ou en modifiant la configuration du serveur pour autoriser les listes de répertoires.

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!