为什么Image 'complete'属性总是返回true，即使没有SRC标签

Why Image 'complete' property always return true even if there is no src tag?

本文关键字：SRC 标签 complete Image 属性 返回 为什么 true      更新时间：2023-09-26

我只写

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为真，IE为假

谁能解释为什么这种不一致的行为?

是否有其他更好的方法来检查图像是否在DOM中加载?

我尝试了readyState属性，但它不适合IE11。

这是IE的一个bug。根据规格:

如果以下任何一个条件为真，IDL属性complete必须返回真:

  • 省略src属性。
  • 网络任务源在获取资源后排队的最后一个任务已经排队。
  • img元素完全可用
  • img元素损坏

否则，属性必须返回false。

了解图像状态的最好方法是处理load和error事件。如果由于某种原因无法判断图像是否已成功加载，请检查img.complete && img.naturalWidth > 0。如果为true，则表示图像加载成功。否则，图像要么仍在加载，要么加载失败——由于IE的不一致，很难判断是哪一个。

请尝试加载

确保在分配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";

返回一个布尔值，无论浏览器是否成功获取图像，该值都为true。如果图像没有src值，它也会显示为true。

像任何href一样，空img src作为相对URL引用基本URL，即文档的URL。@mplungjan张贴了很好的解决方案来实际检查是否以及何时加载

相关文章：