title: jquery fade effects on individual elements on load
body: <p>First off, I'm not a web designer, I'm just a geek trying to help out a friend.</p>
  
  <p>I'm working on a graphic intensive website (it's a photography website) which causes the page to load slowly. The biggest delay is portfolio thumbnails, which are normally hidden by a jquery slider. Because the page may display incorrectly before it's finished loading (and that looks tacky), I implemented a loading graphic that disappears on <code>$(window).load()</code>. But because that waits for all of the graphics to load, that loading graphic can spin for 10 seconds or more before displaying the page (depending on bandwidth).</p>
  
  <p>What I want to do is display individual elements, with pretty jquery effects, as they load. That way the viewer can start seeing content right away and it still looks pretty.</p>
  
  <p>So I set some elements to <code>display:none</code> and then call a <code>fadeIn()</code> and/or a <code>slideDown()</code> function on it at the end of my page. That works, but sometimes the <code>fadeIn()</code> function runs before the graphics are fully loaded, so they still appear to pop in. But if I try to wrap the <code>fadeIn()</code> function inside <code>('#element').load()</code> it doesn't work. I can put all of the fade effects in a <code>window.load()</code>, which looks pretty, but that defeats the purpose since it still waits on all of those thumbnails.</p>
  
  <p>Alternatively, if there's a way to exclude certain images from the <code>window.load()</code> event? Or to add the thumbnail galleries dynamically after <code>window.load()</code>? Right now the page is fairly static, just some pretty jquery sliders and a lightbox.</p>
  
  <p>I'm using jQuery 1.9.1 sourced from Google. If there's another or better way to make the page render pretty, I'm all ears.</p>
  
  <p>The test site URL is <a href="http://www.arrington-photography.com/index2.html" rel="nofollow">here</a> . My vision I'd like to see is to display the background and loading graphic, then <code>slideDown()</code> the logo, followed by <code>fadeIn()</code> the picture frame, remove the loading graphic, fade in the picture frame content, then fade in the bottom navigation menu while sliding down the left navigation menu.</p>
  
  <p>(edit)<br>
  Here's a more detailed description of the problem I'm trying to work around. If the whole page takes 10 seconds to load:
  <br>@1 second all of my text content is displayed in block and looks like a poorly designed 8th grade class project from 1995.
  <br>@2-5 seconds <code>document.ready()</code> fires and the slider script finishes parsing the page and moves the text content container elements into place in a really jumpy and ugly fashion. Now the layout looks alright.
  <br>@10 seconds the thumbnails finally finish loading and <code>window.load()</code> fires.</p>
  
  <p>My current workaround starts fading in container elements after the slider script finishes, but some of those elements may not have finished loading and so they sometimes appear to pop in instead of fading in.</p>