6

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

如果您转到下面的 URL，您可以看到我的意思，在左侧 (3) 我想要一个不同的衬里，您选择一个样本；假设您选择“Asahi Chartreuse”。请注意，左侧的预览没有任何变化。但是，如果您继续选择另一个样本，您将在左移上看到预览，以显示 Asahi Chartreuse。所以它落后了。这就是为什么我认为这是一个“刷新”问题。它在 Chrome 中运行良好。

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

你可以在这里看到代码：https ://www.casemodo.com/test.asp

到目前为止我尝试过的：

我试过添加标题来表示“无缓存”。

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

更改 src 后，我尝试将 focus() 设置为图像。

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

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

我试过设置window.focus()。

我已经尝试（如您现在所见）在更改 src 后设置警报。

GUESS：现在的情况是，JavaScript 引擎在我设置 src 后暂停，直到您手动单击（聚焦）屏幕上的其他位置。所以它甚至从来没有涉及到我上面尝试过的所有脚本。

4

6 回答 6

8

将 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

这对我有用 - 它让我发疯！

于 2012-11-13T16:23:52.377 回答
2

尝试使用 onclick 而不是 onchange。后者不适用于某些浏览器中的某些表单元素。

于 2012-06-06T15:53:23.653 回答
1

我已经看到类似的 IE 问题通过对 innerHTML 的看似奇怪的重新分配来解决。假设“容器”是一个引用 img 的 parentNode 的变量。试试“container.innerHTML = container.innerHTML”。这会触发重新渲染，并可能使错误的 img 栩栩如生。

于 2012-06-06T15:53:16.390 回答
1

对问题的评论：

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

一条建议：

  • 使用setTimeout, 以便在触发超时事件时发生实际更改，而不是在原始 GUI 事件线程中。例如，如果原始 javascript 是

    SomeFunction();

    将其更改为

    setTimeout(SomeFunction, 10);

    （image.src = newURL;里面是在哪里做的SomeFunction）

于 2012-08-14T04:59:03.917 回答
0

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

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

它最终为我工作。

于 2019-07-30T12:52:51.013 回答
0

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

唯一对我们有用的是在更改src属性值之前自行替换图像元素：

var myImg = document.getElementById('myImg');
myImg.parentNode.replaceChild(myImg, myImg);
myImg.src = newUrl;
于 2018-09-20T18:25:13.033 回答