進度條應顯示在屏幕上，直到網頁加載完畢

我使用波紋管代碼來顯示進度條。進度條應顯示在屏幕上，直到網頁加載完畢

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

進度條在屏幕上顯示直到1000毫秒然後消失。但我希望屏幕上顯示進度條，直到(time) = page load。意味着靜態我正在採取1000毫秒，但我希望進度條顯示那麼多時間..一個頁面需要時間加載。

那麼如何獲取頁面加載時間並將其傳遞給此處？

來源

2013-04-10 IT_INFOhUb

堆載預壓技術不談，你可以看看這裏的一個解決方案... http://stackoverflow.com/questions/13182282/how-to-find-out-what-這個頁面的百分比已經按順序加載了更新的-ohq – mamoo 2013-04-10 06:27:45

您將無法獲得頁面加載時間，但是您可以綁定到window.onload事件以隱藏進度欄。 window.onload事件將僅在頁面完全加載時觸發。

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

來源

2013-04-10 06:40:15

Ohk。然後我在哪裏放置window.onload ..在$（document）.ready（）中。或之前呢？ @maheshsapkal – 2013-04-10 06:50:51

理想情況下，在$（document）.ready（）之前... – 2013-04-10 06:52:36

我已經試過了。但沒有影響。我必須獲得頁面加載時間並將其傳遞到1000毫秒。 – 2013-04-10 07:55:27

我們需要做的是首先儘快顯示進度指示器，然後在頁面完全加載時將其隱藏。我們可以通過在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>

來源

2013-05-24 14:22:32

進度條應顯示在屏幕上，直到網頁加載完畢

回答

相關問題