프리 로더 문제

Question

나는이 웹 사이트의 대부분에서 여전히 초보자이지만 웹 사이트를로드하기 전에 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 --> 

이 작동, 그러나 이것을 코딩하는 더 깨끗한 방법이 있는지 궁금해하고있었습니다.

Answer 1

페이지 앞에 div를로드 할 방법이 없습니다. 거의 최적의 해결책은 당신 것입니다. div는 나머지 코드처럼 DOM의 일부이기 때문에 페이지 앞에 div를로드 할 수 없습니다. 하나의 div를 제외하고 모든 페이지를 숨기고 로딩 막대를 표시하면서 페이지가로드 될 때까지 기다릴 수 있지만 (이 작업을 수행하려는 경우) 순차적 페이지로드는 AJAX로만 가능합니다.

아약스 방식은 스크립트와 로딩 바가있는 페이지 만로드 한 다음 아약스가 수신 한 json에서 페이지를 작성하거나로드 바 '화면'뒤에 전체 뷰포트를로드하는 것입니다.

재미있게 구현하면 꽤 많은 코드입니다.