Javascript:下载图像一次，将其设置为src或背景几个对象

Javascript: download image once, set it as src or background to several objects

本文关键字：src 背景 对象 几个 设置 图像 下载 Javascript 一次      更新时间：2023-09-26

我想了解如何减少我网站上的网络流量。如果我创建一个图像对象，将其src设置为url，然后在其onload处理程序中将另一个图像对象的src设置为原始图像对象的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元素的background-image url设置为Image对象的src，这也不会添加另一个网络调用。

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

谢谢!

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

相关文章：