背景图像在chrome / jquery post + div刷新上闪烁答案

【问题标题】：Background image flickering on chrome / jquery post + div refresh背景图像在chrome / jquery post + div刷新上闪烁
【发布时间】：2015-04-29 17:12:27
【问题描述】：

当我将一些数据刷新到包含背景图像的 div 中时，我遇到了问题。背景图片在 chrome 上闪烁。

在 Chrome 上自行检查：

编辑：检查下面，等待 10 秒，前 2 张图片将开始闪烁。我将它们托管在我用于我的网站的类似服务器上（这是我制作的朋友的 wordpress）。终于发现问题的感觉真好！

var list1 = window.setInterval('refresh()', 1000);

function refresh() {
  data = '<div class="pics" style="background-image:url(http://www.planetgame25.fr/TEST/cow.jpg)"></div>';
  data += '<div class="pics" style="background-image:url(http://www.planetgame25.fr/TEST/peppers.jpg)"></div>';
  data += '<div class="pics" style="background-image:url(https://www.processing.org/tutorials/pixels/imgs/tint1.jpg)"></div>';
  data += '<div class="pics" style="background-image:url(http://science.nasa.gov/media/medialibrary/2011/08/02/the-helix-nebula_.jpg/image_mini)"></div>';
  $('#refresh').html(data);
}

.pics {
  width: 100px;
  height: 100px;
  display: block;
  background-position:center center;
  margin:5px 5px 5px 0;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="refresh">
</div>

如何解决这个问题？

【问题讨论】：

标签： jquery google-chrome refresh flicker blink

【解决方案1】：

我无法重现您的问题，但一些 CSS hack 通常会有所帮助：

尝试将其添加到您的背景元素中：

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

或者，如果这不是解决方案，您还可以通过将其添加到背景元素来“强制”硬件加速：

-webkit-transform: translate3d(0, 0, 0);

【讨论】：

再试一次，你会看到图片在 10 秒后闪烁，我将 2 张图片托管在与我使用的服务器类似的服务器上。虽然另外 2 个托管在远程服务器上，但我在谷歌图片上找到了图片。

【解决方案2】：

好的，无论如何，当我在我的 htaccess 中更改为生产环境时，Chrome 上的问题将消失。就是这样！

【讨论】：