jQuery .load(), don't show new content until images loaded
- by Jarred
Hi. 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...
