使用JavaScript刷新“在线”用户

Question

我有一个聊天应用，可以显示在线用户（用户名+个人资料照片）。我有一个ajax轮询，基本上检查哪些用户仍然在线，并自动刷新列表。此外，列表是根据上次活动排序的。

我一直这样做的方式是：

1. 获取当前在线用户列表
2. 清除现有元素
3. 重新添加它们（将自订购step1的返回列表后正确订购）

这在Chrome中运行良好，但我注意到在Firefox重新添加图片时会导致“闪烁”效果。

最好的方法是什么？创建算法检查哪些元素存在，如果它们是正确的顺序并移动它们等等，似乎过于困难。想法？

Answer 1

您多久轮询以查看用户是否仍在线？

我认为最好的方法可能是为用户提供唯一的ID记录，以便您可以根据现在在线的新用户列表检查联机用户列表。

淡化已经离开并淡入任何登录过的用户。

这将是一个更优雅的解决方案，它解决了您遇到的问题。

Answer 2

首先，我会尝试使用“预加载”技术单独“缓存”图像。这是在您创建Image对象并将其src设置为userpic的URL时。然后将所有这些对象存储在全局数组中。这将阻止浏览器在屏幕上不再显示图像时将其删除，以便在重新加载列表时不必再次加载它们。

如果这没有帮助，我实际上会重用现有的列表元素。我将逐个浏览这些元素，并用列表中的相应内容替换它们的内容。如果我在流程中用完现有元素，我会添加新元素。如果列表结束时遗留了任何元素，我将其删除。这有点复杂，但实际上并不像第一眼看上去那么复杂。