Question

我有这个功能，

showcase_loader()

将html加载到包含.load（）的包装器中，然后激活一个名为.nivoslider（）的插件函数，该函数将图像列表格式化为幻灯片，具体取决于该列表中所有图像的尺寸（必须等待所有人加载来做这件事。）

一旦我第一次触发.load（）（点击.projects a），似乎图像没有足够的时间加载，因此插件无法发挥其魔力。我尝试将幻灯片放映功能设为：

.load(var, callback function)

确保所有图像都已加载，但它似乎只在我第二次尝试时工作（当图像被缓存时，我想象）。我这样说是因为它没有搞砸我的本地副本，只有在线副本。

你可以在这里试一试（raphaelguilleminot.com日志：furax75传递：kjhdjj我已经为IE推出了调试的CSS）

我被困了一段时间......有什么想法吗？

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

加载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

我找到了解决问题的复杂方法。

Answer 2

在

上调用showcase_loader函数

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

由于$(window).load()等待内容加载，因此$(document).ready();

$(window).load();将查看图片并确保已加载每个图片内容，或检查每个图片是否已加载。

jQuery .load（）：回调幻灯片放映功能不会先加载所有图像加载，但会在第二个.load（）上正确加载

2 个答案: