jQuery의 load()를 통해 페이지의 일부가로드되는 동안 애니메이션로드 중 표시

Question

내 사이트에서 jQuery의 load() 함수를 통해 동적으로 "페이지"를로드하고 로딩 애니메이션을 추가하고 싶습니다.

function loadPage(){ 
    $("#content").load("example.html"); 
} 

어디 <div id="loading"></div> 동안 jQuery를로드 내용을 표시하는 코드를 넣어 것?

감사의 말을 전합니다.

Answer 1

.load()의 콜백 함수를 사용하면로드 할 div를 끝내면 숨길 수 있습니다.

function loadPage(){ 
    $('#loading').show(); 

    $("#content").load("example.html", function() { //calback function 
     $('#loading').hide(); 
    }); 
} 

Answer 2

당신은이 같은 시도 할 수 있습니다 :

$(document).ready(function() { 
    $(this).ajaxSend(function() { 
     $(this).append('<div id="loading"></div>'); 
    }).ajaxStop(function() { 
     $('#loading').remove(); 
    }); 
}); 

당신의 아약스 통화 모두를 위해 작동합니다 ... 난 당신이 원하는 정확히 모르는

Answer 3

하지만, 콘텐츠를 div에로드하려고합니다. 당신은 CSS 클래스 만들어야합니다 addClass()과 (선택 취소가 후)는 로딩을 시작하고 .load 콜백 removeClass으로 제거 할 때

.loading { 
    background: url(loading.gif) center center; 
} 

을하고 사업부에이 클래스를 추가 할 수 있습니다.