html - 如果我创建和 Image 对象但没有将其添加到 DOM 中，它是否将图像 src 下载到用户页面中？

Question

我在我的页面中输入了以下代码：

var img = new Image(); 
img.src="abc.jpg"

abc.jpg 是一个页面计数器，它可以帮助我在加载后计算页面浏览量。对于这种情况，我只创建了 img 元素，但没有将其添加到 DOM 中。

图像是否下载到用户页面？或者我必须将它添加到 DOM 中？

非常感谢。

==================================================== ===============

为了让事情更清楚，这里提供了一个演示页面：http ://ad3.guruonline.com.hk/mobmax/testing/stackoverflow.html

此页面引用了一个 JS 文件“stackoverflow.js”：

对于stackoverflow.js，它创建了一个指向“stackoverflow.jpg”的变量“img”

所以，我回到stackoverflow.html，查看“网络”选项卡：最令人惊讶的是，stackoverflow.jpg 居然被下载了！

根据KK的回答，不应该下载stackoverflow.jpg，对吗？因为我从不将它添加到 DOM 中。有人可以就这种情况提供解释吗？

谢谢！

Answer 1

更新 通过修改后的帖子，无论是否将其添加到 DOM 中，似乎都会加载图像。也许这就是 Image 对象的工作方式。另一个有趣的事情是，如果您定义一个普通的 Javascript 对象并将该对象中的 src url 添加为键值对，即：

img["src"]="http://www.example.com/image/sameple.jpg";

然后在这种情况下，没有加载可以通过查看网络选项卡来验证的图像。所以是的，即使图像被添加到 DOM 中，Image() 也会加载 src。

此技术已用于预加载图像，可以在此链接中找到更多详细信息：http ://www.techrepublic.com/article/preloading-and-the-javascript-image-object/

不过问题很好！

没有被添加到 DOM 中，它只是一个变量，它将被视为一个变量。您需要将其添加到 DOM 以加载图像。如果要预加载图像，可以使用隐藏的图像标签来加载图像。您可以参考这个预加载图像的解决方案：如何在没有 Javascript 的情况下预加载图像？

Answer 2

您需要通过创建一个 Dom 节点来添加它，因为没有它，元素​​将不会添加到 DOM