jQuery : 아약스를 포함한 전체 페이지가로드 될 때까지 기다리시겠습니까?

Question

저는 아약스를 통해 콘텐츠를로드하는 jQuery 탭을 사용하고 있습니다. 다음 코드와 함께 $(document).ready()을 사용하고 있습니다 :

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

목적은 페이지가 완전히로드 될 때까지, 다음의 내용을 표시하고 로딩 애니메이션을 숨길 기다리는 것입니다.

그러나 $(document).ready()은 외부 Ajax 콘텐츠가 아닌 기본 페이지 만로드 할 때까지 기다립니다.

아약스가로드 될 때까지 기다릴 수있는 것이 있습니까?

미리 감사드립니다.

Answer 1

아약스 라이브러리에 따라 기본 Ajax (get post ..) 작업이 완료 될 때 호출되는 콜백을 제공하는 옵션이 일반적으로 있습니다. 이 콜백을 사용하여 .ready() 내에서 작업하지 않고도 초기화 할 수 있습니다.

Answer 2

먼저로드하는 동안 애니메이션을 표시하려면 ajaxStart 및 ajaxStop을 사용하십시오. 그것은 자동 painlessly 않습니다. 다음은 그 예입니다 :

// 참고! 이것은 아약스 작업이 발생하는 경우 꽤 대화 상자가 자동으로 점멸, 내 jQuery.ready 섹션에서이 코드와 함께 ... 대화를 할

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와 - UI를 사용합니다.

마지막으로 나중에 내용을 표시해야하는 경우 ajax 호출의 success 함수 내에 show() 메서드를 넣어야합니다. 여러 개의 ajax 호출이 발생하면 모든 변수가 완료되면 신호를 보내는 플래그로 일부 변수를 사용해야합니다.

하나 이상의 아약스 전화가 있습니까?