jQuery .load() : callback slideshow function doesn't load all images to load first, but then loads correctly on second .load()

Question

Hi there,

Ive got this function,

showcase_loader()

that loads html into a wrapper with .load() and then fires up a plugin function called .nivoslider() which formats a list of images into a slideshow, depending on the dimensions of all the images in that list (has to wait for all of them to load to do that).

Once I fire .load() the first time (click on .projects a), it seems the images dont have enough time to load, and therefore the plugin cannot do its magic. I tried putting the slideshow fucntion as:

.load(var, callback function)

to make sure all the images were loaded, but it seems to only work the second time I try (when the images are cached, i imagine). I say that because it doesnt screw up on my local copy, only the online one.

you can try it live here (raphaelguilleminot.com log: furax75 pass: kjhdjj I HAVENT DEBUGGED CSS FOR IE YET)

I've been stuck for a while... Any thoughts?

JQUERY:

// showcase loader 
 var showcase_loader = function() { 
//prepare loader
$('html, body').animate({scrollTop:0}, 'slow');
var toLoad = $(this).attr('href')+' #showcase';
  //check if there is already something loaded in wrapper
  if ( $('#project_showcase_wrapper').is(':hidden') ) {
        //mark link as selected
        $(this).addClass('opacity');
        //load showcase content
        $('#project_showcase_wrapper').load(toLoad, function() { 
         $('#project_showcase_wrapper').slideDown('normal', function() {

          $('#slider').nivoSlider({effect:'fade'});
          $('#showcase').fadeIn('normal');
          $('.showcase_badge').fadeIn(2000);
          $('#showcase_next, #showcase_previous').click(showcase_loader);
         });
         });         
}else{

$('.opacity').removeClass('opacity'); 
$(this).addClass('opacity');
 $('#showcase').fadeOut('normal', function() { 
 $('#project_showcase_wrapper').load(toLoad, function() {
  $('#slider').nivoSlider();
  $("#showcase").hide();
  $('#showcase').fadeIn('normal');
  $('.showcase_badge').fadeIn(2000);
  $('#showcase_next, #showcase_previous').click(showcase_loader);
  });
});
}
return false;
}

LOADED HTML:

<div id="showcase">
 <div class="showcase_text">
 </div>
 <ul id="slider">
  <img src="images/project1_slide1.jpg" alt="" title="" />
  <img src="images/project1_slide2.jpg" alt="" title="" />
  <img src="images/project1_slide3.jpg" alt="" title="" />
  <img src="images/project1_slide4.jpg" alt="" title="" />
  <img src="images/project1_slide5.jpg" alt="" title="" />
  <img src="images/project1_slide6.jpg" alt="" title="" />
 </ul>
 <div id="showcase_nav">
 <a href="index2.html" class="close_showcase">close</a>
 <a href="project_2.html" id="showcase_next">next project</a>
 </div>
</div>

Answer 1

I figured out a convoluted way to solver the problem... But it works, thx guys!