如果我创建 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，它创建一个变量“img”，它指向“stackoverflow.jpg”

所以，我回到 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 才能加载图像。如果要预加载图像，可以使用加载图像的隐藏图像标签。您可以参考这个解决方案来预加载图像：How to Preload Images without Javascript?