即使没有src标记,为什么Image'complete'属性总是返回true？

Question

我只是写

document.createElement("img").complete;//To check whether image is loaded or not

在Firefox中,它返回true.在IE中,它返回false

要么

在html页面中,只需创建一个图像:

 <!-- IMG tag with no SRC attribute. -->
<img id="noSrcImg" />

并在js中检查完整的属性值:

var img = document.getElementById("noSrcImg");
img.complete

对于FF,为true,对于IE为false

任何人都可以解释为什么这种不一致的行为？

有没有其他更好的方法来检查DOM中是否加载了图像？

我尝试使用readyState属性,但它不适用于IE11.

Answer 1

这是IE中的一个错误. 根据规格:

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

• 该src属性被省略.
• 一旦获取资源,网络任务源排队的最终任务已排队.
• 该img元素完全可用.
• 所述img元件被破坏.

否则,该属性必须返回false.

了解图像状态的最佳方法是处理load和error事件.如果由于某种原因不可行,要判断图像是否已成功加载,请检查img.complete && img.naturalWidth > 0.如果为true,则表示图像已成功加载.否则,图像仍在加载,或者无法加载 - 由于IE的不一致,很难分辨出哪一个.

Answer 2

请尝试加载

还要确保在分配 src 之前定义事件处理程序 - 在非常快的网络上，如果没有首先定义，src 可能会在事件处理程序之前加载

var im = document.createElement("img");
im.onload=function() { alert(this.src+' loaded')} // assign before src
im.onerror=function() { alert(this.src+' failed')} // if necessary
im.src="someimage.jpg";