Обновление "онлайн" пользователей с помощью JavaScript

Question

У меня есть приложение чата, в котором отображаются пользователи, которые находятся в сети (имя пользователя + фотография профиля). У меня есть опрос ajax, который в основном проверяет, какие пользователи все еще в сети, и автоматически обновляет список. Также список упорядочен по последним действиям.

Я так и делал:

1. Получить список текущих онлайн-пользователей
2. Очистить существующие элементы
3. Повторно добавить их (будет упорядочено правильно, поскольку упорядочен список, возвращаемый на шаге 1)

Это прекрасно работает в Chrome, но я заметил в Firefox, что он вызывает эффект "мерцания", когда изображения повторно добавляются.

Каков наилучший способ сделать это? Кажется чрезмерно трудным создать алгоритм, который проверяет, какие элементы существуют, находятся ли они в правильном порядке, перемещает их и т. Д. Мысли?

Answer 1

Как часто вы проводите опрос, чтобы видеть, все ли пользователи все еще онлайн?

Я думаю, что наилучшим способом может быть предоставление пользователям уникальных идентификаторов, чтобы вы могли затем сравнить список пользователей, которые были онлайн, с новым списком пользователей, которые сейчас онлайн.

исчезают пользователи, которые ушли, и исчезают в любом, кто вошел в систему.

Это будет гораздо более элегантное решение, и оно решит вашу проблему.

Answer 2

Во-первых, я бы попытался «кэшировать» изображения отдельно, используя технику «предварительной загрузки». Именно тогда вы создаете объект Image и задаете для него src URL-адрес пользователя. Затем вы сохраняете все эти объекты в глобальном массиве. Это не позволит браузеру избавиться от изображений, когда они больше не отображаются на экране, поэтому ему не придется загружать их снова при перезагрузке списка.

Если это не поможет, я бы фактически использовал существующие элементы списка. Я хотел бы просто просмотреть элементы по одному и заменить их содержимое соответствующим содержимым из списка. Если у меня заканчиваются существующие элементы в процессе, я добавляю новые. Если какие-либо элементы остаются после окончания списка, я их удаляю. Это немного сложнее, но на самом деле не так сложно, как кажется на первый взгляд.