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')
    );
}

然而，它的行为非常奇怪。通常，我得到 no 警告框。但是，如果我打开开发人员工具并暂停脚本执行，我会收到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"); }
    );

为什么尝试使用jQuery预加载图像不起作用？

1 个答案: