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 的警报。没有什么比一只优秀的老海森虫更好的了!

可以找到一个实例 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"); }
    );