title: How do I load my footer after my content has faded in with Javascript?
body: <p>I've got thumbnail images on my site fading in one at a time on load. I'm wondering how I can get the footer to appear after my thumbnails, so it doesn't show immediately and get pushed down as the images fade in. </p>
  
  <p>After some initial research I realised I needed to add some sort of callback to my function, so I placed an alert in but for some reason it doesn't pop-up after the images fade in. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(window).load(function() {
          var images = $('figure');
          var imageCount = images.length;
          var count = 0;
  
          var fadeImages = function(image, callback) {
              $(image).fadeIn(170, function() {
                  // Increase the count.
                  count++;
                  if (images[count]) {
                      // Pass the callback to the recursively called function.
                      fadeImages(images[count], callback);
                  }
              });
  
              // Make sure that we're only calling the callback once the images have all loaded.
              if (typeof callback === 'function' &amp;&amp; count === imageCount) { 
                  callback.call(this); // brings the scope to the callback
              }
          };
  
          fadeImages(images[0], function() {
              alert('Load footer');  // your callback here
          });
      });
   &lt;/script&gt;
  </code></pre>
  
  <p>You will see what I mean on my website <a href="http://edharrisondesign.com/portfolio-site/" rel="nofollow">here</a>. </p>
  
  <p>My main questions are:</p>
  
  <p>1) How do I get the callback function to run after the images have loaded? </p>
  
  <p>2) Could someone point me in the right direction with what to write to get the footer to appear after the images have faded in?</p>
  
  <p>Any help would be much appreciated!</p>