5

这是代码：

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

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

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

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

为了修复它，我想知道是否可以<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);
4

3 回答 3

0

当你开发一个用于视网膜显示的应用程序并且你想让浏览器知道它是一个高分辨率图像时，你可以在图片名称后面附加“@2x”，如下所示：

背景图片: url('../img/logo2@2x.png');

尝试一下，看看浏览器是否采用相同的策略。

资料来源：http ://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

于 2013-10-16T14:30:31.270 回答
0

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

于 2013-10-16T12:21:07.050 回答
0

你必须听突变事件，特别是DOMNodeInserted

完整文档可在MDN > Mutation Events获得

一旦您检测到已添加图像（您必须过滤正确的图像类型），您可以替换您想要的图像的来源。

取自 MDN 的一个小片段：

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

注意性能会大大降低

于 2015-07-03T15:18:58.563 回答