Question

我正在使用一些jQuery选项卡通过ajax加载其内容。我将$(document).ready()与以下代码结合使用：

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

目的是等到页面完全加载，然后显示内容并隐藏加载动画。

但是，$(document).ready()仅等待加载主页面，而不是外部ajax内容。

在加载ajax之前，我还能做些什么吗？

提前致谢。

Answer 1

根据您的ajax库，通常有一个选项可用于提供在底层ajax（get post ..）操作完成时调用的回调。您可以使用该回调进行初始化，而不是在.ready（）....

中

Answer 2

首先，如果您希望在加载时显示动画，请使用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调用的success函数中。如果你发生了多次ajax调用，你需要使用一些变量作为标志，以便在一切都完成时发出信号（笨重）。

您是否正在进行一次或多次ajax通话？

jQuery：等待整个页面 - 包括ajax - 加载？

2 个答案: