使用jQuery預加載目錄中的所有圖像

Question

我想在名為img的目錄中預加載所有圖像，該目錄還包含名為ui_images 。

我知道如何通過將其名稱放在數組中並執行預加載工作來預加載特定圖像，但我想知道如何告訴腳本動態搜索該目錄中的所有圖像img和img/ui_images ？

這是我的代碼：

var preloadImg = function(imgArr){
    $.each(imgArr, function(index,value){
        $("<img/>")[0].src = value;
    }); 
}

var arrimg = ['img/check.png','img/add_sub.png'];
preloadImg(arrimg);

Answer 1

在http中沒有通用的工具來進行目錄列表。 我能想到的選擇是：

1. 以可預測的方式命名您的圖像，如（img001，img002等），然后您可以加載圖像，直到出現錯誤。

2. 以可預測的方式命名您的圖像，如（img001，img002等），然后在您的網頁中將一個數字限制值編碼為有多少。

3. 創建一個ajax調用（在客戶端和服務器上），它將為您提供要預加載的圖像名稱列表。

4. 讓您的服務器在頁面中嵌入一系列圖像名稱，以便了解要預加載的內容。

Answer 2

我正在考慮提高我的一個網站的性能，並研究這個。 我的解決方案似乎有效，我還沒有在其他任何地方看到它。

它是使用jquery和php的兩步法

1. //通過jquery預加載圖像。一旦通過回調緩存，就刪除並刪除圖像

    <div id="preload"></div> $('#preload').load('preload.php', function() { $('#preload').remove(); }); 

2. //下面的preload.php - 遍歷圖像文件夾並將圖像插入隱藏的div中

    <div style="display:none"> <?php $dirf = 'images'; $dir = scandir($dirf); foreach ($dir as $file) { if (($file != '..') && ($file != '.')) { echo "<img src='images/$file' />"; } } ?> </div> 

這在Firefox中有效，但可以隨意批評或改進