프리 로더 gif에 지연 추가

Question

프리 로더 gif에 지연을 추가하고 싶습니다. 나는이 http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/ 자습서를 따라하고 작동하도록 만들었지 만 페이지가로드 될 때 최소 3 초 동안로드하는 gif를 표시하려고합니다.

덕분에 당신이이 프리 로더를 호출 할 때 따라 수 (초 단위)를()에 전송

<script type="text/javascript">// <![CDATA[ 
     function preloader(){ 
      document.getElementById("loading").style.display = "none"; 
      document.getElementById("content").style.display = "block"; 
     }//preloader 
     window.onload = preloader; 
// ]]></script> 

Answer 1

사용 방법은 setTimeout일까요?

<script type="text/javascript">// <![CDATA[ 
    function preloader(){ 
     setTimeout(function() { 
      document.getElementById("loading").style.display = "none"; 
      document.getElementById("content").style.display = "block"; 
     }, 3000); 
    }//preloader 
    window.onload = preloader; 
// ]]></script> 

위의 그림은 로딩 시간과 다음 3 초 동안의 로딩을 보여줍니다. 당신은 같은 것을 달성하고자하는 "3 초 이상 표시 로딩을하지만 로딩이 더 이상 삼초 이상했다 경우로드 될 때 즉시 숨기기"당신이 사용할 수있는 것보다, 경우 작동 원리

<script type="text/javascript">// <![CDATA[ 
    var minimumShowLoadingTimeReached = false; 
    setTimeout(function() {minimumShowLoadingTimeReached = true;}, 3000); 

    function preloader() { 
     if (minimumShowLoadingTimeReached) { 
      showContent(); 
     } else { 
      setTimeout(function() { 
      preloader(); 
      }, 500); 
     } 
    } 

    function showContent(){ 
     document.getElementById("loading").style.display = "none"; 
     document.getElementById("content").style.display = "block"; 
    } 
    window.onload = preloader; 
// ]]></script> 

를?

1. 미만 삼초에 페이지를로드하는 경우 -은 3-3.5 초
2. 의로드 블록을 표시하면 3 초 이상에서 페이지가로드 (예를 들어 사초에) - 단지에 대한 표시 로딩 블록 로딩 시간 (1/2 초의 정확도로)

Answer 2

<script type="text/javascript">// <![CDATA[ 
    function preloader(secs){ 
    if (secs >= 3) { 
     document.getElementById("loading").style.display = "none"; 
     document.getElementById("content").style.display = "block"; 
    } else { 
     setTimeout(function(){preloader(secs+1);},1000); 
    } 
    } 
    window.onload = preloader(0); 
// ]]></script> 

---

1. 도움이됩니다.
2. 프리 로더에서 if 절은 번호가 '3'에 도달했는지 확인합니다.
3. 그렇지 않은 경우 preloader()는 1 초의 시간 초과 후 다시 자신을 호출합니다 (1000ms).
4. '초'가 3에 도달하면 로더를 숨기고 내용을 표시하는 코드가 실행됩니다.