jqueryを使用してページが読み込まれるまで要素を隠す - jqueryを使用する

デッドシンプルなコードを書くだけで、ページの読み込みが完了して読み込み中に表示されるまですべての要素を非表示にしています（）。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"); 
    });

出典

2011-09-13 Sam

おそらくページにロードされているものに応じて、任意の可能なページのちらつきを避けるために、最初からコンテンツのdivを非表示にします。

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

出典

2011-09-13 09:50:15 njr101

良いキャッチ！意味がある。 – Sam

このJavaScriptに若干の改善がフェードアウトが完了したときに開始フェードインフェードアウトようにコールバックを使用することです。これにより、よりスムーズな移行が可能になります。

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

出典

2014-02-18 11:06:42 nidal

jqueryを使用してページが読み込まれるまで要素を隠す - jqueryを使用する

答えて

関連する問題