預加載jQuery插件的CSS背景圖像

我有一個jQuery插件，使用針規。在最初加載包含插件的頁面後，插件在加載背景圖像之前開始其動畫。當速度計超出範圍時，會加載另一個圖像（「破損」的計量表），但在圖像加載之前又會有一個延遲。（看到這一點，輸入小於零或高於100的值）預加載jQuery插件的CSS背景圖像

http://jacob-king.com/demo/speedometer

我嘗試使用this solution，解決了「斷」圖像預加載的問題：

http://jacob-king.com/public/notSoPublic/jquery.speedometer-1.0.3/example.html

(function(){ 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]=_speedometerDirectory+"/background.jpg"; 
    images[1]=_speedometerDirectory+"/background-broken.jpg"; 

    // start preloading 
    for(i=0; i<=1; i++) 
    { 
      imageObj.src=images[i]; 
    } 

})();

但是我怎麼強制插件在啓動動畫之前等待兩個背景圖片加載？

解決方案

由於圖像加載的jQuery插件的一部分，將它們放在$ .fn外呼似乎是不恰當;除非速度計功能被調用，否則圖像不應加載。

我結束了crimson_penguin的解決方案稍加修改的版本會：

var img0 = new Image(); 
img0.src = _speedometerDirectory+"/background.jpg"; 
var img1 = new Image(); 
img1.src = _speedometerDirectory+"/background-broken.jpg"; 

$(img0).load(function() { 
    $(img1).load(function() { 
     // Everything's ready. Now we begin. 
    }); 
});

這可能看起來有點缺憾。隨意建議一個更優雅的語法（它很晚，我很累，這是有效的，所以「足夠好」）。結果可以看到here，我將把它作爲我的1.0.4更新的一部分。感謝大家。

編輯：我說得太快了。如果沒有加載到高速緩存中的圖像，該插件無法啓動的谷歌瀏覽器的第一個頁面加載...圖像已加載完成後

來源

2011-01-31 Jake

嘗試運行`onload`函數而不是`dom ready` – Raynos 2011-01-31 00:49:17

您只使用一個對象來加載兩個圖像;我不確定這會起作用。我反而做這樣的事情：

for(i=0; i<=1; i++) 
{ 
    var img = new Image(); 
    img.src = images[i]; 
    images[i] = img; 
    $(images[i]).load(function() { ... }); 
}

然後，您可以設置負載功能有遞減（或增加）的一些計數變量，當它到達零（或者它應該數量達到），你開始。當然，count變量對於循環來說不必是局部的。我不確定它是否必須是全球性的，或者它是否可能是本地的功能。

來源

2011-01-31 00:58:18

window.onload = function() { 
    // start my plugin 
};

的window.onload應該只觸發。爲了安全起見，我會在頭部運行圖像預存功能。

來源

2011-01-31 00:54:01 Raynos

預加載jQuery插件的CSS背景圖像

回答

相關問題