javascript - jQuery - 确保内容在淡入之前加载？

Question

Nick Craver 在这个线程中的这段代码确实帮了我很多忙 jQuery - Can someone help stitching jQuery code with .ajaxComplete()?

而且它正在工作。但我注意到，在单击链接之后和内容实际加载之前有一点延迟。加载的内容也不是非常密集，所以我认为这与脚本中发生的事情的顺序有关。

原始代码如下所示:

$('.dynload').live('click',
 function(){

 var toLoad = $(this).attr('href')+' #content';
 $('#content').fadeOut('fast',loadContent);
 $('#ajaxloader').fadeIn('normal'); 

 function loadContent() {
     $('#content').load(toLoad,'',showNewContent())
 }
 function showNewContent() {
    $('#content').fadeIn('fast',hideLoader());
    //Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 
'advent'}); 
 }
 function hideLoader() {
     $('#ajaxloader').fadeOut('normal');
 }

 return false;

 });

新代码如下所示:

$(function() {
  $('.dynload').live('click', function(){
    $('#ajaxloader').fadeIn('fast');
    $('#ajaxloaderfridge').fadeIn('fast');
    var href = this.href + ' #content';

    $('#content').fadeOut('fast',function() {
      $(this).load(href,'', function(data) {
        createMenus();
        $('#ajaxloader').fadeOut('fast');
        $('#ajaxloaderfridge').fadeOut('fast');
        $('#content').fadeIn('fast');
        Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
      });
    }); 
    return false;
  });
});
$(createMenus);

function createMenus() {
  $('#kontrollpanel .slidepanels').kwicks({
     min : 42,
     spacing : 3,
     isVertical : true,
     sticky : true,
     event : 'click'
  });                    
}

在原始代码中，#content 淡出，然后启动函数“loadContent”。 这基本上也是新脚本中发生的事情，不是吗？ 当我使用旧代码时，内容淡出和淡入非常快且平滑，并且在内容到达之前没有小的暂停延迟。

Answer 1

为了加快加载速度，请将您的点击处理程序更改为:

$('.dynload').die('click').live('click', function(){
  $('#ajaxloader, #ajaxloaderfridge').fadeIn('fast');
  var href = this.href + ' #content';
  $('#content').fadeOut('fast').load(href, function(data) {
    createMenus();
    $('#ajaxloader, #ajaxloaderfridge').fadeOut('fast');
    $(this).stop().fadeTo('fast', 1);
    Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
  }); 
  return false;
});

这会立即触发内容加载，而不是等待淡入淡出完成。这意味着您的内容加载速度快了 200 毫秒，如果它在淡出完成之前加载，没问题，它会停止淡入淡出并开始淡入。