Jquery选项卡 - 完全渲染之前的延迟，在渲染时检测

Question

我正在使用jQuery UI中的标签：http://jqueryui.com/demos/tabs/

我实际上在这些标签中有很多数据，因此当页面加载时，数据会在标签完全处理/呈现之前完全混乱。

因此，我正在寻找一种方法来检测标签何时完成渲染，可能会使用回调功能。像这样，我可以在标签完全呈现之前显示等待消息。

谢谢！

Answer 1

我们在工作中遇到了同样的问题，说实话，如果你在页面上加载它，它在大多数JQuery中都是一个明显的问题。为了确保它只在它实际就绪时显示，我们最初隐藏父标签容器，如下所示：

<div id="tabs" style="display: none;">

然后在我们调用.tabs后的document.ready函数中，然后我们将其显示为可见，如下所示：

$(function () {
    $("#tabs").tabs();

    $("#tabs").css("display", "block");
});

Answer 2

通常，这是通过在内容的顶部显示/隐藏div或2来完成的。你可以从http://www.ajaxload.info/获得一个花哨的加载gif来帮助你入门。然后你会想要在你的页面上放置一个DIV：

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

默认情况下你会想隐藏这个，所以你需要添加这个CSS：

#loading { display:none; }

你也想为此设置显示器：

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
           background-image:url("transparentbg.png"); }

文件transparentbg.png将是25x25黑色PNG设置为约80％不透明。接下来，您需要一种使用jQuery显示和隐藏它的方法：

function showLoading() {
  $("#loading").show();
}

function hideLoading() {
  $("#loading").hide();
}

现在，当您需要执行诸如查询数据的外部页面之类的操作时，您可以使用它：

showLoading();
$.post("data.php", {var:"foo"}, function(results){
  $("content").append(results);
  hideLoading();
});

您可以更改tab1.php，tab2.php等的data.php，链接到该选项卡的相应php页面。