jquery 페이지 로딩 지연

Question

페이지가 약간 지연되어로드 된 후 외부 소스에서 div를로드하려고합니다.

여기 jquery 스크립트가 있습니다. 콘텐츠는 먼저로드되고 나중에 loader.gif가 발생합니다. 몇 xx 시간 후에 외부 소스의 컨텐츠를 어떻게 표시 할 수 있습니까? .load() 기능에 대한 아이디어가 있지만 구현 방법을 잘 모릅니다. 당신은 몸이로드되는 동안 DIV를 보여 온로드 숨길 필요가 jquery website

The load event is sent to an element when it and all sub-elements have been 
completely loaded. This event can be sent to any element associated with a URL: 
images scripts, frames, iframes, and the window object. 

에서

$(window).load(function() { 
$('<div id="overlay"><img src="loading.gif" /></div>') 
.css('opacity', '0.5') 
.insertAfter('body'); 

window.setTimeout(function() { 
$(document).ready(function() { 
$('#overlay').remove(); 
});}, 1000); 
$('.body').show(); 
}); 

<div id="container"> 
<div id="header">navigation</div> 
<div id="body" class="body">Body</div> 
<div id="footer">footer</div> 
</div> 


#overlay { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
background: gray; 
} 

.body{display:none;} 

#overlay img { 
display: block; 
width: 32px; 
height: 32px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -26px 0 0 -26px; 
padding: 10px; 
background: #fff; 
-moz-border-radius: 6px; 
border-radius: 6px; 
} 

Answer 1

. 나는 그것이 당신이 요구하고있는 것인지 확실하지 않습니다. 그렇지 않다면 setTimeout 함수가 원하는 것일 수 있습니다.

Answer 2

당신은 ajax를 당긴 후에 gif가로드 중입니다. 그 문제이면 GIF를 수행하여로드 된 후, 당신은 당신의 아약스 풀을 호출 할 수 있습니다

window.setTimeout(function() { 
$(document).ready(function() { 
... 

당신이 타임 아웃을 설정 코드에서 다음 코드에서 작은 문제가있다

yourimg = new Image(); 
yourimg.src = "loading.gif"; 

yourimg.loadEvent = function(url, image){ 
    var overlay = $('<div id="overlay" />'); 
    overlay.append(image).css('opacity', '0.5').insertAfter('body'); 
    //call whatever you want here. your image is loaded. 
} 

yourimg.load(); 

Answer 3

이 작업을 수행하는 함수 :

function() { 
    $(document).ready(function() { 
     $('#overlay').remove(); 
    }); 
} 

은 기본적으로 두 번째를 대기하고 문서의 준비 이벤트에 리스너를 추가하고 리스너에서 실제 작업을 수행한다. 따라서 ready 이벤트가 1 초 동안에 실행되면 함수가 전혀 실행되지 않습니다.

코드는 다음과 같아야합니다

$(window).load(function() { 
    setTimeout(function() { 
     // Do the dom manipulations remove the placeholder 
    }, 1000); 
}); 

자리 표시는 부하 이벤트 이후 두 번째에서 제거 될 예정입니다. "로드"및 "준비"이벤트가 다릅니다. "load"는 DOM이 파싱되거나 렌더링되는 것을 보장하지 않습니다.