title: Load html with ajax, but hide content until loaded
body: <p>I'm using jQuery to load content dynamically when the user clicks a link. The content is just a bunch of images that are then set to display in a slideshow of sorts. My problem is, I can't seem to figure out a way to show the loaded content only AFTER the images have fully loaded. I've tried several different solutions and all of them seem to either break the script or just not work the way I want. Here's the code I'm using now:</p>
  
  <pre><code>$(document).ready(function() {
  
  $("a#item").click( function() {
  
     var projectName = $(this).attr('class');
  
     $("div.slideshow").css("display", "block");
  
     $("div.slideshow").load(projectName+".php", function() {
  
          var slideshow = new Array();
  
          $("div.slideshow img").each(function() {
              slideshow.push($(this));
          });
  
          startSlideshow(slideshow.shift());
  
          function startSlideshow(image) {
              image.delay(400).fadeIn(150, function() {
                  if(slideshow.length &gt; 0) {startSlideshow(slideshow.shift());}
                  else { $("div.slideshow").delay(400).fadeOut(200, function() {$("div.slideshow img").css("display", "none")}); }
  
              });
          }
     });
  
     return false;
  
  });
  
  });
  </code></pre>
  
  <p>You can also see the full demo site here: <a href="http://publicprofileproject.com/" rel="nofollow">http://publicprofileproject.com/</a></p>
  
  <p>Any input would be greatly appreciated!</p>