jQuery/JavaScript を使用してフォルダーから画像を動的にロードする方法

jQuery/JavaScript を使用してフォルダーから画像をロードする

指定されたフォルダー内のすべての画像ファイルのリストを取得し、それらをWeb ページは、フロントエンド開発における一般的なタスクになる可能性があります。これを実現するには、強力な JavaScript および jQuery テクニックを使用できます。

「images」フォルダーからの画像の読み込み

「images」という名前のフォルダーがあるシナリオを考えてみましょう。 「」には画像ファイルが含まれています。 jQuery/JavaScript を使用してこのフォルダーからすべての画像を HTML ページに読み込むには、次の手順に従います。

<code class="javascript">// Define the folder path
var folder = "images/";

// Use AJAX to retrieve the folder contents
$.ajax({
    url: folder,
    success: function (data) {
        // Parse the response data
        $(data).find("a").attr("href", function (i, val) {
            // Check if the file is an image
            if (val.match(/\.(jpe?g|png|gif)$/)) {
                // Append the image to the body of the page
                $("body").append("<img src='" + folder + val + "'>");
            }
        });
    }
});</code>

このコード スニペットは、AJAX を利用して「images」フォルダーの内容を取得します。次に、応答データを解析し、画像拡張子を持つファイルをフィルタリングし、jQuery を使用してドキュメント本文に画像を動的に追加します。

注:

• コードをローカルで実行している場合、Apache サーバーではオプション インデックス オプションが有効になっています。
• Express などのサーバーの場合Node の場合、フォルダー一覧を有効にするために、serve-index NPM パッケージをインストールする必要がある場合があります。

以上がjQuery/JavaScript を使用してフォルダーから画像を動的にロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。