在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. 如果没有，请调用预加载功能（启动加载动画）
4. 添加图像load事件的回调（停止加载动画）

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

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

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

由于

本

Answer 1

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

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

    //Image loaded

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

Answer 2

由于你只有3个布尔条件可以实现，你可以使用卡诺图来消除竞争条件。 k-map用于简化布尔表达式并消除竞争条件，例如，如果存在未定义的转换。

1. 检查无法加载的图像（例如404）。
2. 检查图片是否已加载this.complete
3. 如果没有，请调用预加载功能（启动加载动画