图像元素的"完整"属性究竟是如何工作的？

Question

我对这个complete属性的理解遇到了一些问题.

我以为complete会是true如果图像已被下载并正确解码.

MDN说 ......

如果浏览器已获取图像,则为True,并且它处于支持的图像类型中,该图像类型已被无错误地解码.

因此,我假设complete在load事件被触发之前检查图像的属性将返回false(图像尚未被提取).当在jsFiddle中隔离它时,我在结束标记之前true检查script元素内部的属性时不断获取</body>.

我还尝试更改src图像的属性,然后立即检查其complete属性.我可以在浏览器中看到,即使在图像下载之前它也会complete回来true(我正在通过Firebug中的Net面板查看它的进度).

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

目前正在Firefox 7.0.1中测试.这可能是一个Firefox错误,但只有另一个问题作为证据.

Answer 1

来自w3c-docs

如果满足以下任一条件,则IDL属性complete必须返回true:

• src属性被省略.
• src属性的值是空字符串.
• 一旦获取资源,网络任务源排队的最终任务已排队,但尚未运行,并且img元素未处于损坏状态.
• img元素完全可用.

听起来结果是正确的.假设高速缓存初始图像,则已经提取了图像.
当您更改src(排队另一个任务)时,它对complete-property没有任何影响

我玩了一下,当你在设置新的src之前删除src属性时,看起来好像你得到了预期的结果.演示:http://jsfiddle.net/doktormolle/UNEF7/

说明:当没有src属性存在时,图像的状态变为"已损坏"(第三个条件将不再匹配),并且在加载新的资源之前它将不会完成.

Answer 2

我已经有了答案，但你不会喜欢它......

当使用 创建相关图像时document.createElement，它就可以工作。请参阅http://jsfiddle.net/minitech/nmuQ8/

我发现这在创建测试以查看它是否不起作用时有效，因此到目前为止，我没有办法判断是否确实需要更换，不幸的是。