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 - 確保內容在其淡入之前加載？

回答

相關問題