谷歌浏览器闪烁调用 jQuery.html() 方法答案

【问题标题】：Google Chrome flickers calling jQuery.html() method谷歌浏览器闪烁调用 jQuery.html() 方法
【发布时间】：2014-06-25 04:38:37
【问题描述】：

在我的项目中，我使用 jQuery.html() 来刷新页面上的元素。使用 AJAX 从服务器接收内容。在 FF 和 IE 中它运行良好，但在 Chrome 中我看到它闪烁。我意识到它与 AJAX 无关。问题是 Chrome 总是从服务器获取图像，即使它们没有更改。以下示例演示它。如何防止 Chrome 从服务器重新加载图片？

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="XXX">

</p>
<script>
    setInterval(function () {
        $("#XXX").html('This is dynamic content from server with an image <img src="alarms.png">');
    }, 1000);
</script>
</body>
</html>

【问题讨论】：

就像这里的一般评论一样，如果您想在页面上显示动态内容，我不会每秒更改页面的 HTML 内容并放入相同的内容。如果且仅当发生更改时，您最好从 AJAX 加载中捕获内容更改，或者更好地使用 Websockets 或长轮询方法来拉入内容更改并更新页面。这是一种更好的方法，并且还可以消除不断刷新内容的“闪烁”。

标签： javascript jquery html google-chrome flicker

【解决方案1】：

您可以查看here，了解如何优化缓存内容。您也可以先尝试预加载图片here。

【讨论】：

这是缓存问题。谢谢。

【解决方案2】：

尝试将window.onload = 放在 setInterval 函数之前。网页加载时会加载该函数。

【讨论】：

或者更好的是，因为您已经在使用 jQuery，请将整个 setInterval 调用包装在 jQuery(document).ready( function() { ... } ) 中。