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

发布于 2024-08-22 03:03:21 字数 339 浏览 6 评论 0原文

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

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

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

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

我可以做些什么等待 ajax 也加载吗？

提前致谢。

原文

I'm using some jQuery tabs that load their content via ajax. I'm using $(document).ready() in conjunction with the following code:

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

The purpose is to wait until the page is fully loaded, then show the content and hide the loading animation.

However, $(document).ready() only waits for the main page to load, not the external ajax content.

Is there something I can do wait until the ajax is loaded too?

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狠疯拽 2024-08-29 03:03:21

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

回复收藏 0 原文

零度℉ 2024-08-29 03:03:21

首先，如果您希望在加载时显示动画，请使用 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 调用发生？

First, if you wish to show animation while you're loading, use ajaxStart and ajaxStop. It does it auto-painlessly. Here's an example:

// Note! This uses jquery-ui to do the dialog...

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

});

With this code in my jQuery.ready section, a pretty dialog automatically flashes when ajax operations are occurring.

Finally, if you need to show content afterwards, you need to put your show() method within the success function of your ajax call. If you have multiple ajax calls happening, you'll need to use some variables as flags to signal when everything is done (clunky).

Do you have one or more than one ajax call happening?

回复收藏 0 原文

~没有更多了~