Question

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

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

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

我尝试将其更改为由DY上的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/的Google图片。

当图像标记被相同的

1 个答案: