Question

在javascript中，我可以这样做：

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

我的问题是，这两种方法有区别吗？我读过Image，Form和Element称为主机对象的地方，这是真的吗？如果是，主机对象是什么？

哪种方法更可取？

Answer 1

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

Answer 2

我个人会坚持使用createElement，因为它不是一个特殊情况来制作一个图像，所有内容都是相同的，因为它们是相同的我也注意到jquery使用appendChild（node）方法来处理所有事情，我不确定你和问题中的两个方法之间的区别，但jquery可以跨浏览器工作

Answer 3

要求：

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

1。 img = new Image（）;方式：

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

2。 img = document.createElement（'img'）方式：

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

我不太清楚为什么，但这是我们发现的主要区别。万一其他人需要重用预加载的图像，则可以使用后者来节省一些带宽和少量请求往返：）

Answer 4

我不知道技术差异应该是什么，但我在以下代码中通过从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;

Answer 5

在使用Web组件时，这两种创建图像的方式之间存在一些显着差异。例如，如果您在导入的HTML文档中使用document.createElement方法（使用<link rel="import" href="...">），则在将图像附加到主文档的DOM <之前，不会真正加载该图像/ em>。有关更多详细信息，请参见this SO question/answer。

`new Image（）`和`document.createElement（'img'）`之间有区别吗？

5 个答案:

要求：

1。 img = new Image（）;方式：

2。 img = document.createElement（'img'）方式：