jQuery：等待整個頁面 - 包括ajax - 加載？

我正在使用一些通過ajax加載其內容的jQuery選項卡。我在用下面的代碼結合使用$(document).ready()：jQuery：等待整個頁面 - 包括ajax - 加載？

// Hide loading animation, show content container 
$("#content").show(); 
$("#loading").hide();

目的是要等到頁面完全加載，然後顯示的內容和隱藏加載動畫。

但$(document).ready()只等待主頁加載，而不是外部ajax內容。

有什麼我可以做的等到ajax被加載嗎？

在此先感謝。

來源

2010-02-17 John

根據你的ajax庫，通常有一個選項可以提供一個回調函數，當底層ajax（get post ..）操作完成時調用。您可以使用該回調來執行初始化，而不是在.ready（）中。

來源

2010-02-17 19:04:18 Brian

首先，如果您希望在加載時顯示動畫，請使用ajaxStart和ajaxStop。它可以自動無痛地做到這一點。這裏有一個例子：

//注意！這使用jQuery的UI做的對話框......

jQuery(document).ready(function() { 

    var body = jQuery("body"); 

    body.append('<div id="ajaxBusy"><div style="text-align:center" ><p>Communicating with server...<br \/>Please wait for this operation to finish.<br \/><img src="\/js\/jquery.smallhbar.indicator.gif" \/><\/p><\/div><\/div>'); 


    jQuery('#ajaxBusy').css({ 
    display:"none", 
    margin:"0px", 
    width:"260px", 
    height:"170px", 
    padding:"5px", 
    textAlign:'center' 
    }); 

    jQuery("#ajaxBusy").dialog({ 
    autoOpen: false, 
    bgiframe: true, 
    closeOnEscape: false, 
    //modal: true, 
    title: 'Shipping Department'}); 

    jQuery(document).ajaxStart(function() { 
    jQuery('#ajaxBusy').dialog('open'); 
    }); 
    jQuery(document).ajaxStop(function() { 
    jQuery('#ajaxBusy').dialog('close'); 
    }); 

});

有了這個代碼在我jQuery.ready部分，當AJAX的操作出現一個漂亮的對話框會自動閃爍。最後，如果之後需要顯示內容，則需要將show（）方法放入ajax調用的成功函數中。如果你有多個Ajax調用發生，你需要使用一些變量作爲標誌來指示什麼時候完成（笨拙）。

您是否有一個或多個ajax調用發生？

來源

2012-07-17 13:04:15

jQuery：等待整個頁面 - 包括ajax - 加載？

回答

相關問題