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

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

質問:

どうすれば動的にロードできますか画像名が連続していなくても、jQuery/JavaScript を使用して、特定のフォルダーにあるすべての画像を HTML ページに変換できますか?

回答:

これを実現するには、次のことができます。 AJAX と賢いテクニックを利用して、目的のフォルダー内の画像ファイルを識別します。

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

説明:

• AJAX は、ファイルのコンテンツを取得するために使用されます。 「images」フォルダー。
• 応答データは jQuery を使用して解析され、フォルダー内のファイルを表すアンカー タグ () が特定されます。
• アンカー タグを反復処理して、ファイル名には、サポートされている画像拡張子 (JPEG、PNG、GIF など) が付けられます。
• 有効な画像ごとに、 を動的に作成します。タグを追加して、HTML ページの本文に追加します。

注:

• これが機能するには、サーバーに「オプション」があることを確認してください。
• Express for Node のようなサーバーを使用している場合は、ファイルのリストを有効にするために、serve-index という名前のパッケージをインストールして使用する必要がある場合があります。

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