如何使用 jQuery/JavaScript 從檔案名稱不連續的目錄動態載入映像？

使用jQuery/JavaScript 從目錄動態載入圖片

問題：

問題：

我需要將名為「images」的資料夾中的多個圖片載入到我的網頁中。但是，影像檔案名稱不是連續的整數。如何使用 jQuery 或 JavaScript 實現此目的？

答案：

<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」資料夾中的所有圖片載入到正文中HTML 頁面：

說明：

程式碼首先建立一個資料夾變量，用於保存「images」資料夾的路徑。然後，它使用 jQuery $.ajax() 函數來載入資料夾的內容。成功回呼函數迭代傳回的資料以檢查檔案副檔名是否與接受的檔案類型（.jpg、.jpeg、.png、.gif）相符。如果是，函數將建立一個具有適當來源屬性的圖像元素，並將其附加到頁面正文。

• 注意：
• 此程式碼假設 Apache 伺服器開啟了選項索引功能。

對於 Express for Node 等其他伺服器，「serve-index」NPM 套件可用於允許目錄清單。 可以透過新增更多接受的檔案類型或修改伺服器設定以允許目錄清單來擴充程式碼。

以上是如何使用 jQuery/JavaScript 從檔案名稱不連續的目錄動態載入映像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！