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

Question

这是代码:

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

PREMISSES:<img>元素由专有系统后端生成,并使用低分辨率图像作为源.我只能使用纯javascript(没有jquery!)来操作它.

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

问题:在<img>插入DOM 后执行此操作会发出2(两)个HTTP请求,一个用于lowres图像,另一个用于highres - 我在页面上有很多图像!

为了解决这个问题,我想知道是否可以操作<img>之前将其插入DOM改变src拦截适当,例如<img>事件"beforeInsertion"或事件"afterInsertion"中的<div>包装它.

干杯!

更新1:清楚地说明:1)我无法访问后端/服务器端; 2)我不想显示低分辨率图像,只需要高分辨率; 3)我不提前知道文件名,我需要从中获取它<img>并将其附加到CDN中存储的高分辨率版本的路径(两个图像具有相同的名称); 4)我可以使用下面的代码来完成它,但代价是两个 HTTP请求,这是我想要避免的,这是什么推动了这个问题!;)

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

Answer 1

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