如何使用 jQuery/JavaScript 將資料夾中的圖片動態載入到網頁中？

使用jQuery/JavaScript 將資料夾中的圖片載入到網頁中

問題：

我們如何動態載入使用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 頁面的正文中。

注意：

• 為此，請確保伺服器具有「選項」 Indexes」已開啟。
• 如果使用像Express for Node 這樣的伺服器，您可能需要安裝並使用名為serve-index的套件來啟用檔案清單。

以上是如何使用 jQuery/JavaScript 將資料夾中的圖片動態載入到網頁中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！