預加載器問題

-4

我仍然是這個網站的大多數新手，但我試圖得到一個div在網站之前加載，循環通過我創建的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 -->

這工作，但我想知道是否有更清晰的編碼方式。

來源

2011-12-20 Outlawsessy

這將更適合在js標籤下比php。作爲回答：您應該首先加載網站（瀏覽器法律），然後在頁面的其餘部分隱藏的情況下修改div。 – khael 2011-12-20 17:19:27

刪除了PHP標籤。這個問題沒有什麼是PHP。 – ceejayoz 2011-12-20 17:21:28

什麼是最好的方式來實現我想要做的事情。任何幫助將不勝感激。我知道Khael說要加載網站，然後修改div，而隱藏頁面的其餘部分。有人可以幫我解決這個問題嗎？ – Outlawsessy 2011-12-22 22:09:36

沒有辦法在頁面之前加載div。幾乎最佳的解決方案是你的。您不能在頁面之前加載div，因爲div與代碼的其餘部分一樣是DOM的一部分。您可以隱藏除一個div之外的所有頁面，並在顯示加載欄時等待頁面加載（如果這是您正在嘗試執行的操作），但僅通過ajax就可以加載順序頁面。

ajax的方式是隻加載帶有腳本和加載欄的頁面，然後從ajax接收的json構建頁面，或者在加載欄「屏幕」後加載整個視口。

實現它很有趣，它是相當多的代碼。

來源

2012-01-15 08:31:17 khael

謝謝你清除那個凱爾。我想我會嘗試你所說的，如果我隱藏除一個div之外的所有頁面，這將是最好的。 – Outlawsessy 2012-01-17 20:15:29

預加載器問題

回答

相關問題