jQuery .load (): функция слайд-шоу обратного вызова не загружает все изображения для загрузки в первую очередь, но затем загружается правильно во второй .load ()

Question

У меня есть эта функция,

showcase_loader()

, который загружает html в оболочку с помощью .load (), а затем запускает функцию плагина с именем .nivoslider (), которая форматирует список изображений в слайд-шоу, в зависимости от размеров всех изображений в этом списке (должен подождите, пока все они загрузятся, чтобы сделать это).

Как только я запускаю .load () в первый раз (нажмите на .projects a), кажется, что у изображений недостаточно времени для загрузки, и поэтому плагин не может творить свою магию. Я попытался поставить функцию слайд-шоу как:

.load(var, callback function)

, чтобы убедиться, что все изображения были загружены, но, похоже, он работает только во второй раз, когда я пытаюсь (когда изображения кэшируются, я думаю). Я говорю это, потому что это не портит мою локальную копию, а только онлайн.

Вы можете попробовать это вживую здесь (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:

близко следующий проект

Answer 1

Вызовите функцию showcase_loader на

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

Поскольку $(window).load() ожидает загрузки содержимого, в отличие от $(document).ready();

$(window).load(); будет просматривать изображения и будет проверять, загружено ли каждое изображение, или проверять, загружено оно или нет.

Answer 2

Я придумал запутанный способ решения проблемы.