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

【问题标题】：Safari flickers when image tag is replaced by the same当图像标签被替换为相同的标签时，Safari 会闪烁
【发布时间】：2015-09-19 22:41:27
【问题描述】：

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

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

我们使用 IMG 元素，它位于刷新后的 div 内，但对于给定页面总是相同且位于相同位置，并且在 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>

【问题讨论】：

您是否尝试在<img> 标签上设置宽度和高度？如果您没有设置预定义的宽度和高度，浏览器在重新加载时可能会因为未知的测量值而不时闪烁。
@sqe 它是在真实和小提琴/sn-p 中设置的：--width="797" height="69"-- 它与图像的大小相同，所以无需调整大小。
你可以建个测试看看新的内容是不是和现在的一样...
@MrLister 我不能，“部分”的一些其他部分会改变，系统正在发送整个部分的更新 html，而不是说带有要改变的数字的 json（想在未来，但现在不能这样做）
Urg，我遇到了完全相同的问题。你最终找到解决方案了吗？

标签： javascript html css safari

【解决方案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/。

【讨论】：