在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问题/答案。