JQuery圖像預加載 - 動態圖像集

我有一個滑塊，可以保持背景圖像的動畫效果。背景圖像被應用到頁面的body元素，即它需要頁面的全部大小。JQuery圖像預加載 - 動態圖像集

在主頁上可以看到這個動畫...從數據庫中提取的滑塊中總共有10個圖像。

我的問題是我應該如何預加載這些圖像，因爲大多數這些圖像的大小超過200-300KB。jquery預加載需要靜態圖像名稱數組，但加載時我不知道它們的名稱。

那麼你們可以幫我預先加載這些動態圖像嗎？

來源

2012-02-28 Ninad Ajnikar

所以，你問到預先載入圖像，你不知道文件名爲？無法完成。您需要圖片的網址才能加載或預加載圖片。 – jfriend00 2012-02-28 06:31:27

加載時是的我不知道圖像名稱，因爲這些值是從DB返回。我應該首先發送一個Ajax請求來獲取文件名？ – 2012-02-28 06:36:21

當您有圖像文件名時，您可以開始預加載。所以，做任何你需要做的事情來獲取文件名。 – jfriend00 2012-02-28 06:44:51

這是一個簡單的腳本，它有助於在使用JavaScript之前手動加載圖像。

$.each(data, function(index, item) { 
     var tempImage = new Image(); 
     tempImage.src = item.url; 
     preloadedImages.push(tempImage); 
    } 


where data as an array of image data 
data= 
{ 
    name:'NameofImage', 
    url:'http://www.website.com/image1.jpg', 
}

來顯示圖像，你可以簡單地將圖片添加到DOM

$("img").attr({ 
       src: item.src 
      }).appendTo("#target");

我有一個簡單jsfiddle這demonstartes腳本。它從ajax請求獲取數據並預加載圖像。當用戶將鼠標懸停在目標上時，它會將圖像附加到DOM。

下面是顯示圖像的截圖被加載頁面被載入時間：

Net tab of firefox showing the images being preloaded

這reference link認爲，在DIV加載的圖像，其是隱藏可能不會在Opera等瀏覽器中預加載。我認爲還沒有證實它。

可能有其他的方式來加載使用CSS圖片，如果你不想使用JavaScript

希望這有助於

來源

2012-02-28 06:33:19 frictionlesspulley

感謝您的詳細解釋，但如果你可以仔細閱讀，我不知道圖像名稱，而他們是從數據庫中獲取時加載？我應該然後使用ajax請求從數據庫中獲取圖像...這不會減慢頁面，因爲這是一個主頁，我不希望用戶在主頁上等待。 – 2012-02-28 06:37:52

不會ajax調用幫助獲取圖像的名稱/網址？ – frictionlesspulley 2012-02-28 06:39:07

我已更新我的評論 – 2012-02-28 06:43:24

JQuery圖像預加載 - 動態圖像集

回答

相關問題