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

Question

代码如下:

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

前提:<img>元素由专有系统后端生成，并使用低分辨率图像作为源。我只能使用纯 javascript(没有 jquery!)对其进行操作。

我需要更改src属性为位于外部服务器中的高分辨率版本，例如:src="//cdn.provider.com/highres/image123.png" (图像名称相同但位置不同)。

问题:在 <img> 之后执行此操作插入 DOM 发出 2(两)个 HTTP 请求，一个用于低分辨率图像，另一个用于高分辨率 - 我在页面上有很多图像!

为了修复它，我想知道是否可以操纵 <img>就在将其插入 DOM 之前更改 src适本地，例如通过拦截 <img> <div> 的事件 “beforeInsertion” 或事件 “afterInsertion”包装它。

干杯!

更新 1:澄清一下:1) 我无权访问后端/服务器端； 2)我不想显示低分辨率图像，只想显示高分辨率； 3) 我事先不知道文件名，我需要从 <img> 中获取它并将其附加到CDN中存储的高分辨率版本的路径(两个图像具有相同的名称)；和 4) 我可以用下面的代码来做，但是以 两个 HTTP 请求为代价，这是我想避免的，也是引发这个问题的原因! ;)

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

Answer 1

在添加 <img> 之前您必须更改 url标记到文档(例如在服务器端脚本中)。浏览器将在收到标签后立即从给定的 url 获取图像，因此无法替换它。特别是js会在获取网站上使用的所有元素后执行。