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 毫秒，如果它在淡出完成之前加载，没问题，它会停止淡入并开始淡入。

Answer 2

更新：

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

或者试试这个：

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

Answer 3

你的原始代码的问题是这样的：

$('#content').load(toLoad,'',showNewContent())

实际上，您当时正在打电话给showNewContent。您想将其作为回调传递。它应该看起来像：

$('#content').load(toLoad,'',showNewContent)

同理：

$('#content').fadeIn('fast',hideLoader());

应该是：

$('#content').fadeIn('fast',hideLoader);