Jquery Tabs - Задержка до полного рендеринга, определение при рендеринге

Question

Я использую вкладки в пользовательском интерфейсе jQuery: http://jqueryui.com/demos/tabs/

На этих вкладках на самом деле много данных, поэтому при загрузке страницы данные полностью запутываются до того, как вкладкиполностью обработан / обработан.

Так что я ищу способ определить, когда вкладки закончили рендеринг, вероятно с помощью функции callback .Таким образом, я смогу показать ожидающее сообщение до того, как вкладки будут полностью обработаны.

Спасибо!

Answer 1

У нас была такая же проблема на работе, честно говоря, это может быть очевидной проблемой в большинстве JQuery, если у вас есть множество ее на странице. Чтобы убедиться, что он отображается только тогда, когда он действительно готов, мы изначально скрываем родительский контейнер вкладок следующим образом:

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

затем в функции document.ready после того, как мы вызвали .tabs, мы затем делаем ее видимой, например:

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

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

Answer 2

Как правило, это делается путем показа / скрытия двух или двух элементов над вашим контентом.Вы можете получить красивый загрузочный GIF от http://www.ajaxload.info/, чтобы начать.Затем вы захотите разместить 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 будет черный PNG размером 25x25 с непрозрачностью около 80%.Далее вам потребуется способ показать и скрыть это с помощью jQuery:

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

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

Теперь вы можете использовать это, когда вам нужно сделать что-то вроде запроса внешней страницы данных:

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

Вы можете изменить data.php для tab1.php, tab2.php и т. Д., Ссылаясь на соответствующую страницу php для этой вкладки.