Javascript：下载一次图像，将其设置为src或background到多个对象

我试图了解如何最大限度地减少我的网站上的网络流量。如果我创建一个图像对象，将其src设置为url，然后在其onload处理程序中将另一个图像对象的src设置为原始图像对象的src，这会导致一个网络调用来下载图像还是2

阅读Stackoverflow让我相信它会导致1次调用，因为图像会被缓存。然而，这里有一个JSFIDLE，我在Chrome开发工具中禁用了缓存，并且仍然只有一个网络调用来下载映像

这对我来说是个好消息，但我不明白为什么它会这样工作。另外，正如您在jsfiddle中看到的，我试图将DIV元素的背景图像url设置为image对象的src，这也不会添加另一个网络调用

所以我的问题是：为什么在我上面的代码中只有一个网络调用来下载图像，即使我在Chrome开发工具中禁用了缓存

谢谢
 浏览器一次只能获取特定URI的静态资源，并在必要时重用该资源。您禁用的缓存将在重新加载页面时播放（您告诉Chrome不要在本地存储图像，并始终通过网络获取资产）。如果向
image
变量的图像URL添加查询字符串参数，将发出另一个请求，因为资产现在具有不同的URI（即使它是完全相同的图像）：
这完全是我的猜测，但我认为对于对网页的单个请求，多次下载同一个图像将非常低效。因此，它仍然会为单个请求缓存图像（即使设置已关闭）。不知道在不同浏览器中是否如此。我同意在我上面的代码中下载3次图片是非常低效的，但是我想完全理解优化的来源。谢谢！假设相同的机制在不同的浏览器中以相同的方式工作是否安全？我很高兴！在大多数情况下，您可以从现代浏览器中看到这种行为——尽管在一些边缘情况下，图像可能会下载两次（例如，对图像资源的XHR请求）
<div id='background' style='width: 100px; height: 100px; border: 1px solid red;'>
</div>

<img id='image' style='width: 100px; height: 100px; border: 1px solid green;'/>


var div = document.getElementById("background");
var image = document.getElementById("image");
var imageObj = new Image();
imageObj.onload = function () {
   $(div).css("background-image", "url("+imageObj.src+")");  
   image.src = imageObj.src;
};
imageObj.src =     "https://upload.wikimedia.org/wikipedia/en/thumb/6/62/Riscos_logo_generic_cogwheel_richard_hallas_lg_cogwheel_x1.svg/512px-Riscos_logo_generic_cogwheel_richard_hallas_lg_cogwheel_x1.svg.png";