Refreshing "online" users with JavaScript

I have a chat app where it shows users who are online (username + profile pic). I have an ajax poll that basically checks to see which users are still online, and refreshes the list automatically.开发者_如何学运维 Also, the list is ordered based on last activity.

The way I've been doing it is:

1. Get list of current online users
2. Clear existing elements
3. Re-add them (will be ordered correctly since the returned list from step1 is ordered)

This works fine in Chrome, but I notice in Firefox that it is causing a "flickering" effect while the images get re-added.

What is the best way to do this? It seems overly difficult to create an algorithm check which elements exist, if they are in the right order and move them, etc. Thoughts?

How often do you poll to see if users are still online?

I think the best way may be to give the user records unique ids so you can then check the list of users that were online against the new list of users that are now online.

fade away the users that have left and fade in any that have logged on.

It will be a much more elegant solution and it solves the problem you are having.

Firstly, I would try to "cache" the images separately, using the "preload" technique. That's when you create an Image object and set it's src to the URL of the userpic. Then you store all those objects in a global array. This will prevent the browser from getting rid of the images when they are no longer on the screen, so that it will not have to load them again when you reload the list.

If that doesn't help, I would actually reuse the existing list elements. I would just go over the elements, one by one, and replace their content with the appropriate content from the list. If I run out of existing elements in the process, I add new ones. If any elements are left over when the list ends, I remove them. This is a bit more complex, but actually not as complex as it looks at first glance.