为什么试图用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"); } 
    );