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

Question

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

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

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

图片是否下载到用户页面？或者我必须需要将它添加到 DOM?

非常感谢。

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

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

此页面引用了一个 JS 文件"Whosebug.js":

并且对于 Whosebug.js，它创建了一个指向 "Whosebug.jpg"

的变量 "img"

所以，我回到Whosebug.html，查看"network"选项卡：最令人惊讶的是，Whosebug.jpg居然被下载了！

根据KK的回答，Whosebug.jpg应该不会下载吧？因为我从不将它添加到 DOM。有人可以解释一下这个场景吗？

谢谢！

Answer 1

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

Answer 2

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

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

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

好问题！

没有添加到DOM，它只是一个变量，它会被当作一个变量来对待。您需要将其添加到 DOM 以加载图像。如果要预加载图像，可以使用加载图像的隐藏图像标签。您可以参考此解决方案来预加载图像：How to Preload Images without Javascript?

If I create and Image object but doesn't add it into DOM, does it downloaded image src into user's page?