2011-09-13 4 views
9

페이지로드가 완료 될 때까지 모든 요소를 ​​숨기고로드하는 동안 표시기를 표시하는 간단한 간단한 코드를 작성했습니다 (작동 함).jquery를 사용하여 페이지가로드 될 때까지 요소 숨기기 - jquery를 사용하여

내가 원하는 것은 내가 올바르게하고 있는지, 그리고 무엇을 제안 할 것인지를 아는 것입니다.

HTML

<body> 
    <div class="loading"> 
     <img src="indicator.gif"/> 
    </div> 

    <div class="content"> 
     <!-- page content goes here --> 
    </div> 
</body> 

JQuery와 당신은 아마 페이지에로드되고 있는지에 따라 가능한 페이지 깜박임을 방지하기 위해 처음부터 컨텐츠 사업부를 숨길

$(document).ready(function(){ 
     $(".content").hide(); 
    }); 

    $(window).load(function(){ 
     $(".loading").fadeOut("slow"); 
     $(".content").fadeIn("slow"); 
    }); 

답변

14

.

<body> 
    <div class="loading"> 
    <img src="indicator.gif"/> 
    </div> 

    <div class="content" style="display: none;"> 
    <!-- page content goes here --> 
    </div> 
</body> 


$(window).load(function(){ 
    $(".loading").fadeOut("slow"); 
    $(".content").fadeIn("slow"); 
}); 
+0

좋은 캐치! 말 되네. – Sam

5

이 자바 스크립트에 약간의 개선은 페이드 아웃이 완료되면 시작 페이드 때문에 페이드 아웃에 콜백을 사용하는 것입니다. 이렇게하면 훨씬 더 부드럽게 전환 할 수 있습니다.

<body> 
    <div class="loading"> 
    <img src="indicator.gif"/> 
    </div> 

    <div class="content" style="display: none;"> 
    <!-- page content goes here --> 
    </div> 
</body> 


$(window).load(function(){ 
    $(".loading").fadeOut("slow", function(){ 
    $(".content").fadeIn("slow"); 
    }); 
}); 
관련 문제