jQuery .load(), don't show new content until images loaded

I have been working on a jQuery photo slideshow. It scales the images to the browser size, and slides them left and right. There is no pre-determined size or aspect ratio, the script does everything on the fly. It requires that all images be fully loaded, so it can custom resize each individual image based on it's own aspect ratio ( width():height(), etc ), calculate the width of containing div, and calculate the slide distance from one image to another.

As a stand-alone, it works pretty well (despite my lack of skills)! I simply hide the slideshow containing div at (document).ready, allow the images to load, then run the slideshow prep scripts at (window).load. Once this is done, it only then makes the slideshow divs, images, etc appear, properly sized, positioned and ready to roll.

The ultimate goal is to be able to load in any number of slideshows without refreshing the page. The point of this is to be able to play uninterrupted background music. I know music on websites is annoying, but the target market likes it, a lot!

I am using

(target).load(page.php .element, function prepInsertNewShow() {
   //Prepare slideshow
   resizeImages();
   slideArray();
   //Show slideshow
   (target).fadeIn();
});

and it definitely works! The problem is that I cannot find a way to hold off on preparing and showing the new content until the images have finished loading. It is running the slideshow prep scripts (which are totally dependent on the images being fully loaded), before the images are loaded. This results in a completely开发者_开发知识库 jacked up show! What I want to do is this -

(target).load(page.php .element, function prepInsertNewShow() {
   //Wait until images are loaded  
   $('img').load( function() {
      //Prepare slideshow
      resizeImages();
      slideArray();
      //Show slideshow
      (target).fadeIn();
   }
});

But this doesn't seem to work, the new content is never shown.

You can see a live version here.

The initial gallery loads correctly, everything looks good. The only nav link that works is Galleries > Engagement, which will load a new show (a containing div with multiple <img> tags). You will see that the images are not centered, the containing div and slide distances are much too small, as they were calculated using images that were not actually loaded.

Is there any way I can delay handling and showing new content until it is fully loaded? Any suggestions would be most appreciated, thanks for your time!

PS - It just occurred to me while typing this that a decent solution may be to insert "width=x" height="x" into the <img> tags, so the script can work from those values, even if the images have not loaded...hmm...

Try doing something like this:

$.ajax({
    url: 'page.php',
    success: function(data) {
        var element = $(data).find('.element');
        element.find('img').addClass('loading').bind('load',function(){
            if (!element.find('img.loading').length) {
                  //Prepare slideshow
                  resizeImages();
                  slideArray();
                  //Show slideshow
                  $('#target').fadeIn();
            }
        });
        $('#target').empty().append(element);
    }
}); 

Thanks for your response petersendidit! I did play with this technique for quite a while and had mixed success. I got it to work, but it froze the browser for a few seconds every time. I think this was because it did the entire slideshow prep routine on each individual image, as opposed to once for the entire set.

I was actually able to solve this problem, and it was so very easy, however it doesn't necessarily answer the original question.

I simply inserted width and height values into the HTML and the script was then able to properly format the show without the images being loaded, as it grabs the necessary data straight from the markup, as opposed to the images themselves! This was my 'PS' thought above. Even better is that the PHP app I am using to serve the images (slideshowpro - awesome), is able to automatically insert these values. Aww yeah.

I will say that the process of writing out this question did directly help me solve my problem, so thanks for that stackoverflow!