“new Image(）”和“document.createElement('img'）”之间有区别吗

Is there a difference between `new Image()` and `document.createElement('img')`?

本文关键字：有区别 img 之间 document new Image createElement      更新时间：2023-09-26

在javascript中，我可以做：

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

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

哪种方法更可取？

我找不到任何详细的参考资料，但根据MDC-HTMLImageElement示例中的注释，似乎Image是DOM级别0的一部分，而document.createElement是DOM级别2的一部分。

DOM级别0是由Netscape发明的，它提供了一种访问网站某些元素的方法。基本上所有浏览器都支持向后兼容性
但老实说，我不明白为什么存在Image构造函数，因为据我所知，无法操作DOM级别为0的文档。也许它只是由浏览器内部用于创建对象。

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

有关DOM级别的更多信息，请查看quicksmode.org-Level 0 DOM和维基百科。

我在某个地方读到Image、Form和Element被称为主机对象，这是真的吗？

是的。

如果是，主机对象是什么？

ECMAScript规范以这种方式激励主机对象：

ECMAScript是一种面向对象的编程语言，用于在主机环境中执行计算和操纵计算对象。这里定义的ECMAScript不打算在计算上自给自足；实际上，本规范中没有关于外部数据的输入或计算结果的输出的规定。相反期望ECMAScript程序的计算环境不仅将提供本说明书中描述的对象和其他设施，其描述和行为超出了本说明书的范围，只是指示它们可以提供可以访问的某些属性和可以从ECMAScript程序调用的某些函数。

和

主机对象
对象，以完成ECMAScript的执行环境
注：任何非本机对象都是主机对象。

因此，任何未在规范中定义并由环境提供的对象都是主机对象。例如，它们在浏览器（以及其他浏览器）中：window、document和console。

要求：

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

1.img=新图像（）；方式：

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

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

当我们对document.createElement('img')做同样的事情时图像源没有重新加载，而是从文档的本地内存中重用，并且没有对img src URL提出额外的请求。

我真的不明白为什么，但这是我们发现的一个主要区别。如果其他人需要重新使用预加载的图像，那么后面的方法可以节省一些带宽和一些请求往返：）

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

我个人会坚持使用createElement，因为制作图像并不是特例，因为它们都是相同的。我还注意到jquery对所有内容都使用appendChild（node）方法，我不确定这与您问题中的两种方法之间的区别，但jquery确实可以跨浏览器工作

我不知道技术上的区别应该是什么，但我只是通过在下面的代码中从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;

使用Web组件时，这两种创建图像的方法有一些显著的区别。例如，如果在导入的HTML文档中使用document.createElement方法（使用<link rel="import" href="...">），则图像在被附加到主文档的DOM之前不会被实际加载。有关更多详细信息，请参阅此SO问题/答案。

相关文章：