Как определить, когда загруженные AJAX-изображения полностью загружены?

Question

Я работаю над сайтом, где на главной странице есть вращающийся баннер. Когда страница загружена, выполняется запрос AJAX для извлечения остальных баннеров (каждый из которых имеет изображение шириной 960 пикселей). Я поиграл с идеей обычной загрузки страницы со всем загруженным HTML-баннером, но целевая аудитория веб-сайта не всегда гарантированно поддерживает активное соединение, и я хотел, чтобы домашняя страница загружалась быстро. Кроме того, я не хотел конфликтующих тегов H1. Данная страница является целевой страницей на http://www.gosihanoukville.com/

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

Я не включаю здесь код, как это лучше всего видно на упомянутом выше сайте. Используемый файл JS - это посадка.

Спасибо за любую помощь - это сводит меня с ума.

Answer 1

Я бы обычно делал это:

var imagesToLoad = [];
var imagesLoaded = 0;

// Register this handler using whatever framework you like
var whenImageLoaded = function(){
  if (++imagesLoaded == imagesToLoad.length){
    // Start moving the banners.
  }
}