javascript - 图像元素的 `complete` 属性究竟是如何工作的？

Question

我对 complete 的理解遇到了一些问题属性(property)。

我假设 complete将是 true图像是否已正确下载和解码。

MDN says ...

True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

所以，我假设检查图像的 complete load 之前的属性(property)事件已触发将返回 false (图像尚未获取)。在 jsFiddle 中隔离它时, 我不断得到 true检查 script 内的属性时关闭前的元素 </body>标签。

我也是experimented改变 src图像的属性，然后立即检查其 complete属性(property)。我可以在浏览器中看到 complete回来了 true甚至在图像下载之前(我正在通过 Firebug 中的 Net 面板查看其进度)。

我期望的行为是否正确？有没有办法让它按我预期的那样工作？

目前正在 Firefox 7.0.1 中测试。这可能是 Firefox 的一个错误，但只有这个 other question作为证据。

Answer 1

来自w3c-docs

The IDL attribute complete must return true if any of the following conditions is true:

• The src attribute is omitted.
• The src attribute's value is the empty string.
• The final task that is queued by the networking task source once the resource has been fetched has been queued, but has not yet been run, and the img element is not in the broken state.
• The img element is completely available.

听起来结果是正确的。假设初始图像已缓存，则图像已被提取。
当您更改 src(排队另一个任务)

时，它对 complete-property 没有任何影响

我试了一下，当你在设置新的 src 之前删除 src-attribute 时，看起来你得到了预期的结果。演示:http://jsfiddle.net/doktormolle/UNEF7/

解释:当没有 src-attribute 存在时，图像的状态变为“损坏”(第三个条件将不再匹配)并且在新资源出现之前它不会完成已加载。