爲什麼試圖用jQuery預加載圖片不起作用？

Question

目前我有這樣的代碼：

var imgCount = 36; 
var container = $('#3D-spin'); 

var loaded = 0; 
function onLoad() 
{ 
    alert(loaded); 
    loaded++; 
    if(loaded >= imgCount) 
    { 
     alert('yay'); 
    } 
} 

for(var i = imgCount-1; i >= 0; i--) 
{ 
    container.prepend(
     $('<img>') 
      .one('load', onLoad) 
      .attr('alt', 'View from '+(i*360/imgCount)+'\u00B0') 
      .attr('src', '/images/3d-spin/robot ('+i+').jpg') 
    ); 
} 

但是，它的行爲非常奇怪。通常，我得到沒有警報框。但是，如果我打開開發人員工具並暫停腳本執行，則會收到一條說明0的警報。有沒有像一個好老的heisenbug！

可以找到一個生動的例子here。該腳本本身被稱爲style.js，很明顯圖像已加載。

我是在做一些愚蠢的事情，還是jQuery打起來？

Answer 1

如果圖像已被瀏覽器緩存，onload事件有可能不會觸發。你可以做的是手動觸發負載事件的圖像，其complete屬性集：

container.prepend(
    $('<img>') 
     .one('load', onLoad) 
     .attr('alt', 'View from '+(i*360/imgCount)+'\u00B0') 
     .attr('src', '/images/3d-spin/robot ('+i+').jpg') 
     .each(function() { if(this.complete) $(this).trigger("load"); } 
    );