javascript - 在 Internet Explorer 中检查 img.complete 时可能出现竞争条件

Question

我编写了一个 jQuery 插件，它将在图像加载前后执行一个函数。本质上，这是为了让我们可以在显示大图像时显示加载动画。

if (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
    return; // 1
}
// 2
if (!this.complete) {
    options.preload(this); //3

    $(this).load(function () {
        options.loaded(this); //4
    });
}

1. 检查加载失败的图片(例如 404)。
2. 检查图片是否加载this.complete
3. 如果没有，调用preload函数(开始加载动画)
4. 为图片load事件添加回调(停止加载动画)

这在 Chrome 和 Firefox 中运行良好。但是，在 IE (9) 中，我发现有时会触发 preload 函数，但不会触发 loaded 函数。

我怀疑这可能是一个竞争条件。

处理此问题的最佳方法是什么？我应该在调用预加载函数后再次检查 this.complete 吗？

谢谢

本

Answer 1

这取决于何时附加 load 偶数处理程序。如果图像在附加加载事件处理程序之前已经加载，则不会触发加载事件。如果您想避免这种情况，请在附加 load 事件处理程序后设置图像的 src。

$("img").load(function(){

    //Image loaded

}).attr("src", "imageSource");