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

更新：

$('#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 2

您原始代码的问题是：

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

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

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

同样：

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

应该是：

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

Answer 3

要加快加载速度，请将点击处理程序更改为：

$('.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;
});

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

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

3 个答案: