JavaScript：如何在不发出两个HTTP请求的情况下更改图像源

代码如下：

<div id="wrapper">
   <img src="lowres/image123.jpg">
</div>

---

在将

标记添加到文档（例如在服务器端脚本中）之前，必须更改url。浏览器将在收到标签后立即从给定的url获取图像，所以不可能在那个时替换它。特别是js将在网站上使用所有元素后执行。

当您开发视网膜显示应用程序时，如果您想让浏览器知道这是一幅高分辨率图像，您可以在图片名称后附加“@2x”，如下所示：

背景图像：url（'../img）/logo2@2x.png');

试试看浏览器是否采用相同的策略

---

来源：

您必须收听突变事件，特别是

DOMNodeInserted

完整的文档可在

一旦检测到添加的图像（必须过滤正确的图像类型），就可以将源图像替换为所需的图像

来自MDN的一个小片段：

var img = document.getElementById("wrapper").childNodes[0];
img.src = getHighResolutionImagePath(img.src);

---

请注意，性能将大大降低

当用户收到低分辨率或高分辨率图像时，有什么要求？您是否可以使用CSS媒体查询和背景图像而不是实际的

img

标记？您是要更改页面上的所有外部资源，还是只更改少数外部资源。如果是这样的话，您可能可以对元素做一些事情（如果您控制页面的大小）@RGraham:1。没有要求，我只需要更换旧的和不推荐使用的映像，我没有后端访问权限在服务器端将其更改为具有更高分辨率的新版本（我不知道我是否完全理解您的问题）。2.我认为媒体的询问不会有什么帮助。3.代码片段中的

和lowres图像是由后端生成的，我无法控制它。但是，我可以使用背景图像显示高分辨率版本。@Xavier:我不控制

，只有部分图像存储在CDN中。如果您无法访问后端，您将如何插入javascript？看看是否有帮助。您需要在body元素之后添加javascript，以便直接运行。不幸的是，我没有访问后端/服务器端的权限。@tdelboni，因此没有选择。当你的脚本开始执行时，低分辨率图像已经下载。由于我事先不知道文件名，我仍然需要从

元素中获取它…啊，非常正确。我希望你能找到解决办法！

element.addEventListener("DOMNodeInserted", function (ev) {
// ...
}, false);