当图像标签被替换为相同的标签时，Safari 会闪烁

Question

我们的 Safari/Mac 用户报告页面片段上的图像闪烁，该页面片段由 AJAX 调用定期更新。我们无法在 Win 和 Linux 上的 Chrome/Firefox/IE 中重现该行为，甚至无法在 Mac 上重现 Chrome。

我们没有可用于开发的 Mac，所以我有时只能请朋友帮我检查一下。我准备了一个简化的测试用例：https : //jsfiddle.net/tgb1jaog/1/

我们使用刷新后的 div 内的 IMG 元素，但对于给定页面始终相同且位于相同位置，并且在 Safari 中查看时每次刷新时都会闪烁 - 在真实页面和 jsfiddle 上（第一个 div）。

我试图将它更改为由 DIV 上的 STYLE 设置的 CSS 背景代替原始 IMG，这似乎在 jsfiddle（第二个 div）上工作正常，但在我们的真实页面上以相同的方式闪烁。

我将尝试在外部 css 中定义背景并只给 div 一个类（jsfiddle 第三个 div），但由于测试用例行为不同，我不确定它会有所帮助。

所有这些都可以使用不同的浏览器很好地工作。

这是 Safari 中的某种错误（我找不到任何参考资料）？或者有什么方法可以让 Safari 像其他人一样工作？

function replace(id, data) {
    $("#" + id).empty();
    $("#" + id).append($.trim(data));
    $("#" + id).hide();
    $("#" + id).show()
}
function d1() {
    replace("d1", '<img src="https://live.victoriatip.cz/images/baseball-header.jpg" width="797" height="69" />');
}
function d2() {
    replace("d2", '<div style="background: url(https://live.victoriatip.cz/images/baseball-header.jpg); width: 797px; height: 69px;"></div>');
}
function d3() {
    replace("d3", '<div class="b"></div>');
}
setInterval(d1, 2000);
setInterval(d2, 2500);
setInterval(d3, 3000);

#d3 .b {
    background: url("https://live.victoriatip.cz/images/baseball-header.jpg");
    width: 797px;
    height: 69px;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clearfix" id="d1"></div>
<div class="clearfix" id="d2"></div>
<div class="clearfix" id="d3"></div>

Answer 1

事实证明，如果缓存已过期，Safari 将重新请求图像，即使它已经在内存中（与 Chrome、Firefox 等不同）。如果您在 jsfiddle 运行时查看 Safari 调试工具，您会看到服务器请求堆积如山（它们返回 304 但足以导致闪烁）。

您的 jsfiddle 示例中的此图像：https://live.victoriatip.cz/images/baseball-header.jpg设置为立即过期 - Expires: Wed, 19 Aug 2015 14:26:53 GMT。

如果您调整缓存标头，问题应该会消失。

这是一个更新的 jsfiddle，带有缓存的谷歌图像：https ://jsfiddle.net/tgb1jaog/2/ 。