jQuery: ждать загрузки всей страницы, включая ajax? - PullRequest
Новая
       14

jQuery: ждать загрузки всей страницы, включая ajax?

0 голосов
/ 17 февраля 2010

Я использую некоторые вкладки jQuery, которые загружают их содержимое через ajax. Я использую $(document).ready() в сочетании со следующим кодом: 

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

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

Однако $(document).ready() ожидает загрузки только главной страницы, а не внешнего содержимого AJAX.

Могу ли я что-нибудь подождать, пока загрузится ajax?

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 17 февраля 2010

В зависимости от вашей библиотеки ajax, обычно есть опция для предоставления обратного вызова, который вызывается, когда основная операция ajax (get post ..) завершена. Вы можете использовать этот обратный вызов для инициализации, а не внутри .ready () ....

0 голосов
/ 17 июля 2012

Во-первых, если вы хотите отображать анимацию во время загрузки, используйте 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?

...