페이지의 전체로드 과정을 숨기고 사용자에게 준비 페이지 표시하는 방법

Question

다음과 같은 문제가 있습니다. 내 PHP 페이지는 db와 같은 메뉴에서 탐색 메뉴를 생성 한 다음 js를 사용하여 다중 레벨 메뉴처럼 표시합니다. 문제는, 전체 로딩 pocess를 보여줍니다. 그런 첫 번째 사용자에의 참조 뭔가 :

그런

페이지의 전체로드 프로세스를 숨기거나이 문제에 대한 다른 솔루션이 방법

? Thx를 미리

Answer 1

일반적으로 콘텐츠 상단에 div 또는 2 개를 표시/숨김으로 설정합니다. http://www.ajaxload.info/에서 멋진 로딩 gif를 얻을 수 있습니다. 그런 다음 당신은 당신의 페이지에 DIV를 배치 할 수 있습니다 :

<div id="loading"> 
    <p><img src="loading.gif" /> Please Wait</p> 
</div> 

이 CSS 추가해야 할 것입니다, 그래서 당신은이 기본적으로 숨겨져 할 것

:

#loading { display:none; } 

또한 좋겠를 이 너무하도록 설정할 디스플레이를 원하는 :

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%; 
      background-image:url("transparentbg.png"); } 
#loading img {position: absolute; left:50%; top:50%} 

파일 transparentbg.png은 약 80 % 불투명로 설정 25x25 블랙 PNG 될 것이다. 다음으로 jQuery로 이것을 보이거나 숨길 수있는 방법이 필요합니다.

function showLoading() { 
    $("#loading").show(); 
} 

function hideLoading() { 
    $("#loading").hide(); 
} 

Answer 2

페이지가 완전히로드 될 때까지 display:none;에 스타일을 설정하십시오. CSS에서

Answer 3

숨기기를, 다시 (이 코드는 jQuery를 사용) 자바 스크립트 쇼에

#loading { 
    display: block; 
    background: url(loading.gif) no-repeat center center; 
} 
#container { 
    display: none; 
} 

하고, 물론

$(function(){ 
    $('#loading').fadeOut(250, function(){ 
     $('#container').show(); 
    }); 
}); 

당신은, 어쨌든 당신이 원하는처럼 이렇게 숨기고 표시 할 수 있습니다 css의 내용이 있다면 문서 준비가 완료되면 내용으로 전환하십시오. 로드 div를 숨기고 내용을 표시합니다.