具有图像的 div 中的 Ajax 响应会使图像闪烁一秒钟，我们可以避免这种情况吗？答案

【问题标题】：Ajax response in a div having images blinks the images for a second, can we avoid this?具有图像的 div 中的 Ajax 响应会使图像闪烁一秒钟，我们可以避免这种情况吗？
【发布时间】：2014-04-03 22:26:17
【问题描述】：

我有一个 div，它实际上是一个 html 中的聊天面板。我用 Ajax 更新它。它有聊天用户的缩略图。每当响应加载时，它会使所有图像闪烁一秒钟。有没有办法将加载的图像保留在 Cashe 中。当响应每四秒加载一次并且用户的缩略图闪烁时，这看起来很奇怪。我附上图片来解释我的观点。

【问题讨论】：

你能附上你的ajax代码吗？您可能正在替换 div 的整个 HTML，而不仅仅是在 div 的末尾添加新行，这会导致闪烁。

标签： jquery asp.net ajax chat

【解决方案1】：

我相信这是因为消息正在动态刷新。甚至图像标签也被替换为相同的代码。要改变这一点，也许您应该将消息正文包含在像<span class="txtbody"> ... </span> 这样的跨度中，然后您可以在其中更新 txtbody，而不是整个帖子模板和头像。您必须执行每个循环并每隔一段时间进行更新。或者，您可以为类名提供来自消息 ID 的令牌，以便以这种方式动态更新它，而无需间隔。 <span class="txtb-23"> ... </span> 之类的东西，其中“23”是评论的 ID。

因此，您只需要绘制消息并更新消息，而不是整个事情。您不应该刷新所有元素，这是浪费资源。如果有新消息，您应该只推送新消息。

此外，通过只推送新消息并更新旧消息的正文，您可以通过将新评论加载到带有 display:none; 的容器中然后使用类似 .slideDown() 的东西来实现那些简洁的小 jquery 滑块效果 :)

在这种情况下，预缓存图像也可能会有所帮助。我不完全确定它是如何调用的，所以不能保证。 CSS 或 JavaScript 可用于预加载图像。见：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

【讨论】：

【解决方案2】：

我认为这可以通过将图像替换为具有背景图像的元素来轻松避免。

@media screen {
element.className
{
background: transparent url('') 0px 0px
}
}

您可能还想查看Better Image Caching with CSS

【讨论】：