Взаимодействие Javascript и DOM и возможные условия гонки

Question

Сценарий: предварительная загрузка изображений

1. Выполнить запрос ajax
2. Показать экран загрузки
3. Получение результатов из запроса ajax
4. Вставка изображений в дом
5. Дождитесь окончания загрузки изображений
6. Скрыть экран загрузки

Я думал сделать следующее:

function ajaxCallback(results) {
   /* snip insert into dom code */

   $(".waitForLoad").each(function() {
      imageLoadingCount++;
      $(this).load(imageLoaded);
   });
}

var imageLoadingCount = 0;
function imageLoaded() {
   imageLoadingCount--;
   if (imageLoadingCount == 0)
      HideLoadingScreen();
}

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

Answer 1

Наблюдатель событий загрузки немного страшен, потому что он будет работать, только если вы установите его до полной загрузки элемента, если вы установите его после этого, ничего не произойдет. Следовательно, это действительно зависит от того, когда вы вызываете ajaxCallback (). Я бы рекомендовал использовать onSuccess, а не onComplete.

Кроме того, мне интересно, возможно ли использовать обозреватель событий загрузки для самого $ (". WaitForLoad")?

Answer 2

Вы можете безопасно выполнить ajaxCallback в пределах $ .ready () и избавиться от большинства проблем. И обратите внимание, что DOM не обновляется для вновь созданных тегов.

Также обратите внимание, что - спецификация HTTP / 1.1 предполагает, что браузеры загружают не более двух компонентов параллельно для каждого имени хоста. Если вы обслуживаете свои изображения с нескольких имен хостов, вы можете получить более двух параллельных загрузок.

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

Answer 3

Javascript должен работать параллельно с загрузкой, если вы не используете все соединения с запросами AJAX. Во время работы javascript браузер по-прежнему функционирует нормально, и в этом вся суть.