2012-12-19 2 views
1

로드하는 데 시간이 걸리면 로딩 이미지를 표시하려면 다음을 사용합니다.로딩 이미지 표시 첫 페이지 로딩

<div class="divLoading"></div> 

JS :

$("body").on({ 
    ajaxStart: function() { 
     $(this).addClass("loading"); 
    }, 
    ajaxStop: function() { 
     $(this).removeClass("loading"); 
    } 
}); 

CSS

.divLoading { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top:  0; 
    left:  0; 
    height:  100%; 
    width:  100%; 
    background: rgba(255, 255, 255, .8) 
      url('../../Images/ajax-loader.gif') 
      50% 50% 
      no-repeat; 
} 
body.loading { 
    overflow: hidden; 
} 
body.loading .divLoading { 
    display: block; 
} 

그러나이 페이지가로드 1 시간 동안 작동하지 않습니다. 페이지의 내용이 완전히로드 될 때까지 내 사이트에 로그인하자마자이 로딩 이미지를 보여주고 싶습니다. 제발 저를 도울 수 있습니까? 감사.

+0

http://stackoverflow.com/questions/1853662/how-to-show-page-loading-image-div-text-until-the-page-has-finished-loading-rend – Renjith

답변

0

head 태그를 닫기 전에이 코드를 넣어야합니다.

<script> 
$(window).load(function(){ 
    $('#dvLoading').fadeOut(2000); 
}); 
</script> 
+0

하지만 처음으로로드하는 데 얼마나 많은 시간이 걸릴지 모릅니다. 타이머를 사용할 수 없으므로 페이지가 완전히로드 될 때까지 로더를 보여주고 싶습니다. –

+0

당신은이 같은 것을 원해 [jsfiddle.net] (http://jsfiddle.net/jquerybyexample/ssqtH/embedded/result/) ?? –