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

尼克Craver真的帮了我很多与此代码在这个线程 jQuery - Can someone help stitching jQuery code with .ajaxComplete()?jQuery - 确保内容在其淡入之前加载？

而且这是工作。但是我注意到，点击链接之后以及实际加载内容之前有一小段延迟。这并不是非常强烈的内容，因此我认为这与脚本中事件的发生顺序有关。

原来的代码如下所示：

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

在原代码，＃内容淡出，则函数“loadContent”是开始。这基本上是新脚本中发生的事情，不是吗？当我使用旧代码时，内容刚刚淡出，并且在内容到达之前非常快速平滑地消失，并且不会有很小的暂停延迟。

来源

2010-05-01 Kenny Bones

我可以给你一个关于它究竟是什么的简明声明你想要发生？ – GlenCrawford 2010-05-01 11:23:25

我得到了404 /'img/Footer.png'，'/ img/sprite_tints1.png'和'/ img/testGB.jpg'，这会导致浏览器延迟，你能修复或删除这些图片？ – 2010-05-01 13:54:08

我尼克:) 感谢您使我清除这些问题:)我已经解决了他们现在（这是我的傻瓜证明preloader图像：p）但是，它看起来并不像它有任何事情要做尽管我的问题。然而，我注意到了mattbasta的回复。编辑：这不是一个真正的大问题，只是有点讨厌:) – 2010-05-01 14:16:38

对于更快的加载，改变你的点击处理程序是：

$('.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完成之前加载，没有问题，它会停止淡入并开始淡入。

来源

2010-05-01 15:34:50

哈哈，现在它与以前一样，但现在与Cufon和slidemenu一起工作！：d – 2010-05-01 17:13:26

更新：

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

OR试试这个：

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

来源

2010-05-01 10:48:14

这实际上并没有改变任何东西。我得到你的代码正在做什么，但我不认为这真是问题的根源。 – 2010-05-01 10:55:44

查看更新并让我知道！ – 2010-05-01 11:27:46

你在这里干什么？我真的看不到任何真正的差异。我看到你在那里做一个.hide（）。但那不是一个真正的问题。这只是一个单独的div中的加载器动画。这是＃隐藏的内容，然后淡入。这是做什么的？ FadeOut应该替换为hide？ – 2010-05-01 13:49:28

与你原来的代码的问题是这样的：

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

你实际上调用showNewContent然后向右那里。你想通过它作为回调。它应该看起来像：

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

同样有：

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

应该是：

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

来源

2010-05-01 13:20:32 mattbasta

嗯，好吧，我试着回到第一个原始代码，并从这些行的后面移除（）。而这个问题（小暂停延迟）也发生了。那么，我只需要忍受它呢？这就是它的工作原理？我可以尝试不同的动画。 – 2010-05-01 14:10:30

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

回答

相关问题