진행률 표시 줄은 웹 페이지가 완전히로드 될 때까지 화면에 표시되어야합니다.

Question

진행 표시 줄을 표시하는 데 벨로우즈 코드를 사용하고 있습니다. 화면에

jQuery('#container').showLoading(
{ 
     'afterShow': 
     function() 
     { 
      setTimeout("jQuery('#container').hideLoading()", 1000); 
     } 
}); 

진행 표시 줄 1000 밀리 초까지 다음이 사라집니다. 그러나 진도 표시 줄을 (time) = page load까지 화면에 표시하고 싶습니다. 정적으로 나는 1000 밀리 초를 취하고 있음을 의미하지만 진행 막대를 표시하는 데 많은 시간이 걸린다. 페이지가로드되는 데 시간이 걸린다.

페이지 로딩 시간을 얻고 여기에 전달하는 방법 ??

Answer 1

진행률 표시 줄을 숨기려면 window.onload 이벤트에 바인드 할 수 있지만 페이지로드 시간은 얻지 못합니다. window.onload 이벤트는 페이지가 완전히로드 된 경우에만 시작됩니다.

 window.onload = function() { 
      jQuery('#container').hideLoading(); 
     }; 

Answer 2

우리가 할 수있는대로 진행 표시기를 먼저 표시 한 다음 페이지가 완전히로드되면 숨 깁니다. DOM이 준비되면 윈도우 객체에로드 이벤트를 바인딩하여이 작업을 수행 할 수 있습니다.

참고 : 페이지가 너무 작 으면 로더가 눈에 띄지 않을 수 있습니다. 따로 기술을 미리로드

jQuery(document).ready(function() { 
 

 
    showHideLoading(); // load this func as soon as the doc is ready 
 

 
}); 
 

 
function showHideLoading() { 
 

 
    // We'll be referencing #loader more than once so let's cache it 
 
    var loader = jQuery("#loader"); 
 

 
    // now we'll show the #loader 
 
    loader.show(); 
 

 
    // We'll set up a new event so that when everything on the page 
 
    // has finished loading, we hide our #loader 
 
    jQuery(window).on("load", function() { 
 
    loader.fadeOut(500); 
 
    }); 
 
}

body { 
 
    margin: 0; 
 
    } 
 
img { 
 
    max-width: 100%; 
 
    /*this is only here to make the page load a little more slowly */ 
 
} 
 
#loader { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 

 
} 
 
#loader div { 
 
    width: 150px; 
 
    height: 80px; 
 
    margin: -40px 0 0 -75px; 
 
    background: #fff; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    line-height: 80px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- this is only here to make the page load a little more slowly --> 
 
<img src="http://lorempixel.com/image_output/cats-q-c-1920-1080-8.jpg" /> 
 

 

 
<div id="loader"> 
 

 
    <div>Loading</div> 
 

 
</div>