2011-09-13 23 views
9

Sayfa yükleninceye kadar tüm öğeleri gizlemek ve yükleme sırasında bir gösterge görüntülemek için ölü basit bir kod yazdım .. (Çalışıyor).Sayfa yüklenene kadar öğeleri gizle - jquery kullanarak

bu yüzden sorduğum şey doğru yapıp yapmadığımı ve ne önereceğinizin bilinmesidir.

HTML

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

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

jquery Muhtemelen sayfada yüklenmemesi ne bağlı herhangi bir olası sayfa titreşimi önlemek için baştan içerik div gizlemek istiyorum

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

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

cevap

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

iyi yakalamak! bu mantıklı. – Sam

5

bu Javascript'i hafif bir iyileşme fadeout tamamlandığında başlar solmaya böylece fadeout bir geri arama kullanmaktır. Bu size daha yumuşak bir geçiş sağlar.

<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"); 
    }); 
});