プリローダーの問題

Question

私はまだこのウェブのもののほとんどで初心者ですが、私はdivを私が作成したウェブサイトの前にロードするようにしようとしていました。ここに私のコードはを通じてサイクルに下回っており、正しいdivの取得：

$(function() { 
$('#splash-holder').delay(6000).toggle('#splash-main'); 

var counter = 0, 
    divs = $('#splash-one, #splash-two, #splash-three, #splash-five'); 

function showDiv() { 
    divs.hide() // hide all divs 
     .filter(function (index) { return index == counter % 3; }) // figure out correct div to show 
     .fadeIn('fast'); // and show it 

    counter++; 
}; // function to loop through divs and show correct div 

showDiv(); // show first div  

setInterval(function() { 
    showDiv(); // show next div 
}, 13 * 180); // do this every 10 seconds  

}); 

そこで私は、このプリローダースクリプトを使用します。ここでは

$(window).load(function() { 
$('#preloader').delay(6000); 
$('#preloader').fadeTo('fast', 0.1 , function() { 
$('body').css('overflow','visible'); 
$(this).remove(); 
}); 
}); 

は私のコードは次のとおりです。

<div id="preloader"> 
    <div id="spinner_container"> 
    <div id="splash-holder"> 
     <div id="splash-title" class="hFont">We <img src="<?php bloginfo('template_directory'); ?>/images/logo-c.png" /></div> 
     <div id="splash-one" class="hFont">conversations not messages.</div> 
     <div id="splash-two" class="hFont">bridges not silos.</div> 
     <div id="splash-three" class="hFont">things differently.</div> 
</div><!-- #splash-holder --> 
    </div><!-- #spinner-container --> 
</div><!-- #preloader --> 

これは動作しますが、しかし、私はこれをコーディングするよりクリーンな方法があるのだろうかと思っていました。

Answer 1

ページの前にdivをロードする方法はありません。最適なソリューションはあなたのものです。 divはコードの残りの部分のようにDOMの一部であるため、ページの前にdivをロードすることはできません。 1つのdivを除いてすべてのページを非表示にして、ローディングバーを表示しながらページをロードするのを待ちますが（これがあなたがしようとしている場合）、ajaxだけで順次ページをロードできます。

ajaxの方法は、スクリプトとローディングバーを持つページのみを読み込み、ajaxで受け取ったjsonからページを構築するか、ローディングバーの "screen"の背後にあるビューポート全体を読み込むことです。

これを実装するのは楽しいことですが、それはかなりのコードです。