How to detect when AJAX-loaded images are fully downloaded?

I'm working on a website where the homepage has a rotating banner. When the page is loaded, an AJAX request is performed to retrieve the rest of the banners (each of which has a 960-pixel wide image). I toyed with the idea of loading the page n开发者_如何转开发ormally with all the banner HTML loaded, but the target audience of the website are not always guaranteed to be on a blazing connection, and I wanted the homepage to load quickly. Plus, I didn't want conflicting H1 tags. The page in question is the landing page at http://www.gosihanoukville.com/

If you're on a slowish connection, the banners will load and start moving (rotating) before the background images are finished loading. I'm wondering if there is a way to detect if an image has fully downloaded before I have the script start moving the banners.

I'm not including code here, as it is best seen on the website mentioned above. The JS file used is 'landing.js'

Thanks for any help - this is driving me crazy.

---

I would normally do this:

var imagesToLoad = [];
var imagesLoaded = 0;

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