jQuery/JavaScript を使用して、連続しないファイル名を持つディレクトリから画像を動的にロードする方法

jQuery/JavaScript を使用してディレクトリから画像を動的にロードする

質問:

「images」という名前のフォルダーから複数の画像を Web ページにロードします。ただし、画像ファイル名は連続した整数ではありません。 jQuery または JavaScript を使用してこれを実現するにはどうすればよいですか?

回答:

次のコード スニペットは、すべての画像を「images」フォルダーから本体に読み込みます。 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>

説明:

コードは、「images」フォルダーへのパスを保持するフォルダー変数を作成することから始まります。次に、jQuery $.ajax() 関数を使用してフォルダーの内容を読み込みます。成功コールバック関数は、返されたデータを反復処理して、ファイル拡張子が受け入れられたファイル タイプ (.jpg、.jpeg、.png、.gif) と一致するかどうかを確認します。存在する場合、関数は適切なソース属性を持つ画像要素を作成し、それをページの本文に追加します。

注:

• このコードApache サーバーでオプション インデックス機能がオンになっていることを前提としています。
• Express for Node などの他のサーバーの場合、'serve-index' NPM パッケージを使用してディレクトリのリストを許可できます。
• コードは、受け入れられるファイル タイプを追加するか、ディレクトリのリストを許可するようにサーバー構成を変更することによって拡張できます。

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