Fade in list of images, once all are loaded.

Question

I have a group of images in this format:

<ul id="photo-list">
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>

My goal is that once all the images have finished loading, then #photo-list will fade in. Also I would like to display a loading animation before the images are loaded. Any help is appreciated!

Answer 1

I guess I'm a bit concerned why you want to wait for them all to load before you show them. Getting content up fast is important for audience retention.

but do this:

Structure things:

<div id="photos">
   <img src="yourloading.gif" />
   <ul id="photo-list">
      <li><img src="" /></li>
      <li><img src="" /></li>
      <li><img src="" /></li>
   </ul>
</div>

Then your default styles:

#photo-list { display: none; }

Then your jQuery

$(document).ready(function () {
    $("#photo-list li img:last").onload(function () {
         $("#photo-list img").hide();
         $("#photo-list").fadeIn();
    }
}

of course this only detects if the last image is loaded and depending on image sizes, this most likely will create a race condition where other images may not be loaded. Probably a better way would be to use jQuery's data method to set a flag during the onload event and then test to see if all the images have that databit set, then trigger the hiding and fading in.

Now if you're wanting to do some time of image cycling, just use jQuery cycle plugin, hide the images in the UL and let cycle show them. I use cycle on my photo web site http://www.robmiracle.com

Answer 2

This may be overly simplified for your purposes, but if the page consists of little else other than your list of images, you can simply use

$(window).load(function({ ... });

Any code within this function won't execute until the entire contents of the page have loaded. If you have other content on the page that might delay the execution of such code, I would agree with MiracleMan in that you would trip a flag for each image that loads and then execute your code once all flags are set to true.