Possible race condition when checking img.complete in Internet Explorer
<p>I've written a jQuery plugin that will execute a function before and after an image loads. Essentially this is so we can show a loading animation when displaying large images.</p>

<pre><code>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
    });
}
</code></pre>

<ol>
<li>Check for images that have failed to load (e.g.404).  </li>
<li>Check if the image has loaded <code>this.complete</code></li>
<li>If not, call the preload function (starts the loading animation)</li>
<li>Add the callback for the image <code>load</code> event (stops the loading animation)</li>
</ol>

<p>This works fine in Chrome and Firefox. However, in IE (9) I'm finding that sometimes the <code>preload</code> function fires, but not the <code>loaded</code> function.</p>

<p>I suspect that this could be a possible race condition.</p>

<p>What's the best way of handling this? Should I just check <code>this.complete</code> again after calling the preload function?</p>

<p>Thanks</p>

<p>Ben</p>
