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

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

名前が正しくない場合、フォルダーを移動して画像などのアセットをロードするのは困難になることがあります。一連。ただし、jQuery は、任意のディレクトリから画像を取得して表示するソリューションを提供します。

解決策:

このソリューションの実装には、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>

このアプローチでは、jQuery を使用して、AJAX 呼び出しからの HTML 応答を解析します。次に、応答内のアンカー タグを反復処理し、サポートされている画像ファイル拡張子で終わるタグのみを除外します。最後に、これらの検証された画像パスを DOM に動的に追加します。

注:

このソリューションが効果的に機能するには、フォルダーのリストを許可するようにサーバーを構成することが重要です。 。 Apache サーバーでは、「インデックス」オプションを有効にする必要があります。 Express.js と Node.js の場合、「serve-index」という名前の外部パッケージを利用して同じ機能を実現できます。

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