Question

问题：IE版本7和8未显示在JavaScript中完成的更新的IMG SRC更改

你可以看到我的意思，如果你去下面的URL，在左下角（3）我想要一个不同的衬垫，你选择其中一个样本;让我们说你选择“Asahi Chartreuse”。请注意，左侧预览没有任何反应。但是如果你继续选择另一个样本，你会看到左侧的预览显示Asahi Chartreuse。所以它落后了。这就是我认为这是一个“刷新”问题的原因。它在Chrome中运行得很好。

在IE中：请注意，如果单击其他控件，则会进行刷新。

您可以在此处查看代码：https://www.casemodo.com/test.asp

我做了多少尝试：

我尝试添加标题来说“no-cache”。

我试过添加“？”和png文件名后的随机数。

我在更改src后尝试将focus（）设置为图像。

我在尝试更改src之后，告诉style.display被隐藏然后可见。

我尝试在页面上创建隐藏（而非隐藏）的文本输入框，然后在更改img src后将focus（）设置为它。

我尝试过设置window.focus（）。

我已经尝试过（如你所见）在更改src后设置警告。

GUESS：现在的样子是我设置src后暂停JavaScript引擎直到你在屏幕上的其他地方手动点击（焦点）。因此，它甚至从未涉及我在上面尝试过的所有脚本。

Answer 1

将src属性设置为null，然后将其设置为新的url：

在jquery中：

var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);

直接js：

var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl

这对我有用 - 这让我很生气！

Answer 2

尝试使用onclick而不是onchange。后者在某些浏览器中与某些表单元素不兼容。

Answer 3

我看到类似的IE问题通过看似奇怪的innerHTML重新分配解决了。假设“container”是引用img的parentNode的变量。试试“container.innerHTML = container.innerHTML”。这会触发重新渲染，并可能使错误的img变为现实。

Answer 4

对该问题的评论：

请在问题中加入代码段。
是on onchange事件中的javascript，还是在哪里？
如果客户端浏览器是谷歌浏览器，它是否有效？（听起来像是另一个IE-image-src-bug。）
自此问题发布以来，您链接到的演示页面已更改; 当我写这篇文章时，单击一个样本会导致提交，这会导致加载不同的页面。

建议：

使用setTimeout，以便在超时事件触发时发生实际更改，而不是在原始GUI事件线程中。例如，如果原始javascript是
```
SomeFunction();
```
将此更改为
```
setTimeout(SomeFunction, 10);
```
（其中image.src = newURL;在SomeFunction）内完成

Answer 5

这个问题可能不再相关，但是今天当我们检查一个库的向后兼容性时遇到了同样的问题。

对我们唯一有效的方法是在更改src属性的值之前先替换图像元素：

var myImg = document.getElementById('myImg');
myImg.parentNode.replaceChild(myImg, myImg);
myImg.src = newUrl;

Answer 6

我正在使用“延迟加载”实现，并遇到了类似的问题。由于某种原因，在代码中将 data-srcset 属性更改为 srcset 后，即使使用此页面上介绍的其他方法，这些元素似乎仍无法获得新属性值。经过一番研究，我进入了page on github，它是关于延迟加载插件的错误修复。它给了我一个主意，而不是使用这里描述的替换选项或your_element.src=null方法，而是使用这样的东西：

your_element.setAttribute("src", your_element.getAttribute("data-srcset"));

它最终为我工作。

IE未显示在Javascript中完成的更新的IMG SRC更改

6 个答案: