jQuery .load(): fonction diaporama de rappel ne se charge pas toutes les images à charger d'abord, mais les charges correctement sur la deuxième .load()

Question

J'ai cette fonction,

showcase_loader() 

qui charge en html un wrapper avec .load(), puis déclenche une fonction plugin appelée .nivoslider() qui formate une liste d'images dans un diaporama, en fonction des dimensions de toutes les images de cette liste (doit attendre que tous les charger pour faire ça).

Une fois que je lance .load() la première fois (cliquez sur .projets a), il semble que les images n'ont pas assez de temps pour charger, et donc le plugin ne peut pas faire sa magie. J'ai essayé de mettre la fonction de diaporama comme:

.load(var, callback function) 

pour vous assurer que toutes les images ont été chargées, mais il semble fonctionner seulement la deuxième fois que j'essaie (lorsque les images sont mises en cache, j'imagine). Je dis cela parce qu'il ne bousille pas sur ma copie locale, seulement celle en ligne.

vous pouvez l'essayer en direct ici (raphaelguilleminot.com journal: passe furax75: kjhdjj Je nai débogués CSS pour IE POURTANT)

Je suis coincé pendant un certain temps ... Toute pensée?

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; 
} 

CHARGÉ 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

J'ai trouvé un moyen alambiquée pour résoudre le problème.

Answer 2

fonction d'appel de showcase_loader sur

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

Parce que $(window).load() attente pour le contenu à charger, à la différence $(document).ready();

$(window).load(); regardera des images et assurera le contenu de chaque image a été chargée, ou vérifier chaque image est-il chargé ou non.