Ajax: одновременная загрузка нескольких изображений

Question

У меня есть сетка картинок (3х3, рядом, выложены в). Мне нужно обновлять эту сетку очень часто. Поскольку каждая картинка независима от остальных (они захватываются из разных мест), я решил загрузить каждую картинку с помощью своего собственного обратного вызова ajax, например:

for (var i=0; i < numPictures; i++) {
  Dajaxice.loadPicture(callback_loadPicture, {'picture_id':i})
}

Функция callback_loadPicture () помещает картинку на свое место в.

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

Это ведет себя немного по-разному в каждом браузере: иногда картинка будет отображаться по окончании обратных вызовов (но обычно нет), иногда браузер будет показывать некоторые изображения, но откладывать показывать все до завершения загрузки последней.

Я использую:

• django 1.3 (python 2.7)
• Windows x64 в качестве (тестового) сервера
• dajaxice для реализации ajax

Я открыт для изменения структуры моего кода.

Любые комментарии или предложения будут оценены.

Answer 1

Если проблема, с которой вы столкнулись, действительно была вызвана однопоточной реализацией сервера разработки Django, вы можете попробовать django-devserver (https://github.com/dcramer/django-devserver). Среди других улучшений:«Улучшенный сервер выполнения, позволяющий обрабатывать запросы одновременно.»

Другие улучшения тоже того стоят!

Answer 2

Поскольку вызовы ajax блокируются, как говорит chrisdpratt, если вам действительно нужно отображать изображения одновременно, я бы посоветовал какую-то предварительную загрузку сетки изображений 3x3, и когда этого требует код, вы можете отобразить их.

Имея это в виду, вы можете запустить код, который у вас уже есть на $(document).ready(), но сделать изображения скрытыми (т.е. display:none).Когда потребуется позже, вы просто измените атрибут отображения на изображениях, которые нужно отобразить.