Question

我正在尝试了解如何最小化我网站上的网络流量。如果我创建一个Image对象，将其src设置为url，然后将另一个Image对象的src设置为其onload处理程序中的原始Image对象的src，这将导致一次网络调用以下载图像还是2？

阅读Stackoverflow让我相信它会导致1次调用，因为图像会被缓存。但是，这里有一个jsfiddle，我已经在Chrome开发工具中禁用了缓存，并且仍然只有一个网络调用来下载图像。 https://jsfiddle.net/oe7vdo30/

<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";

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

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

谢谢！

Answer 1

浏览器只会获取一次特定URI 的静态资产，并会在必要时重复使用该资产。当您重新加载页面时，您禁用的缓存将会播放（您告诉Chrome不要在本地存储图像并始终通过网络获取资源）。如果您将查询字符串参数添加到image变量的图像网址，则会产生另一个请求，因为资产现在具有不同的URI（即使它是完全相同的图像）：https://jsfiddle.net/hvn6r9re/ < / p>

Javascript：下载图片一次，将其设置为src或背景为多个对象

1 个答案: