jquery - 为什么这种用 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. 没有什么能比得上一只好的老黑森虫了！

可以在这里找到一个活生生的例子。脚本本身被调用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"); }
    );