Javascript-`new Image()`和`document.createElement('img')`之间有区别吗?

在javascript中,我可以执行以下操作:

img1 = new Image();
img2 = document.createElement('img');

我的问题是,两种方法之间有区别吗? 我在某处读到ImageFormElement被称为主机对象,这是真的吗? 如果是,则宿主对象是什么?

哪种方法更可取?

Iswanto Arif asked 2019-10-08T22:41:58Z
6个解决方案
51 votes

我找不到任何详细的参考,但是基于MDC-window示例中的注释,似乎window是DOM级别0的一部分,而window是DOM级别2的一部分。

DOM级别0是Netscape发明的,它提供了一种访问网站某些元素的方法。 基本上所有浏览器都支持它以实现向后兼容。
但是老实说,我不明白为什么window构造函数在那里存在,因为据我所知,没有方法可以处理DOM级别0的文档。也许浏览器仅在内部使用它来创建 对象。

DOM 2级是W3C开发的官方标准。

有关DOM级别的更多信息,请查看quirksmode.org-级别0 DOM和Wikipedia。


我在某个地方读到windowdocumentconsole被称为宿主对象,这是真的吗?

是。

如果是,则宿主对象是什么?

ECMAScript规范通过以下方式激励主机对象:

ECMAScript是一种面向对象的编程语言,用于在主机环境中执行计算和操纵计算对象。 此处定义的ECMAScript并非旨在在计算上自给自足; 实际上,该规范中没有规定输入外部数据或输出计算结果。 相反,期望ECMAScript程序的计算环境不仅将提供本规范中描述的对象和其他设施,而且还将提供某些特定于环境的宿主对象,这些主机对象的描述和行为超出了本规范的范围,除了表明 它们可能提供可以访问的某些属性,以及可以从ECMAScript程序调用的某些功能。

主客体
主机环境提供的对象,以完成ECMAScript的执行环境。
注意任何非本机对象都是宿主对象。

因此,规范中未定义且环境提供的任何对象都是宿主对象。 例如,在浏览器中(例如):windowdocumentconsole

Felix Kling answered 2019-10-08T22:43:29Z
8 votes

这两行是等效的,并且都创建HTMLImageElement对象。唯一的区别是在具有混合名称空间的XML文档中-new Image()始终返回具有XHTML名称空间的<img>元素,而document.createElement('img')并不总是这样做。

duri answered 2019-10-08T22:43:55Z
5 votes

要求:

在我的团队中,我们正在构建角度5应用程序。功能要求是在组件加载时预加载图像,以便在需要时在我们的单页应用程序中的特定位置重用它们而无需再次加载。

1. img = new Image(); 方式:

我们尝试通过create new Image()在DOM中预加载图像但是当我们重用图像src URL时,浏览器总是重新加载源文件或检查标头是否被修改(如果启用了缓存),这意味着预加载成功,但是对于每次重用,都再次进行了服务器往返。

2. img = document.createElement('img')方式:

当我们对document.createElement('img')执行相同操作时图像源未重新加载,而是从文档的本地内存重新使用,并且未对img src URL进行任何额外请求。

我真的不明白为什么,但这是我们发现的主要区别。 万一其他人需要重用预加载的图像,则稍后将是节省一些带宽和少量请求往返的方法:)

Duplich answered 2019-10-08T22:44:57Z
4 votes

我个人会坚持使用createElement,因为那样创建图像不是一种特殊情况,因为所有内容的制作方法都相同,所以我也注意到jquery对所有内容都使用appendChild(node)方法,我不确定之间的区别 那和你的问题中的两个方法,但jQuery确实可以跨浏览器工作

mcgrailm answered 2019-10-08T22:45:24Z
2 votes

我不知道技术上的区别应该是什么,但是我只是通过以下代码将new Image()更改为document.createElement('img')来解决了IE8错误。 在IE8中,使用Image构造函数时,永远不会触发onload回调。

newImage = document.createElement('img');
//newImage = new Image();

newImage.onload = function () {
  callback(this.width, this.height);
};

newImage.src = image.src;
Danny Tuppeny answered 2019-10-08T22:45:51Z
2 votes

使用Web组件时,这两种创建图像的方式之间存在一些显着差异。 例如,如果从导入的HTML文档中使用document.createElement方法(使用<link rel="import" href="...">),则在将图像附加到主文档的DOM之前,不会实际加载该图像。 有关更多详细信息,请参见此SO问题/答案。

answered 2019-10-08T22:46:19Z
translate from https://stackoverflow.com:/questions/6241716/is-there-a-difference-between-new-image-and-document-createelementimg