进度条应显示在屏幕上，直到网页加载完毕

我使用波纹管代码来显示进度条。进度条应显示在屏幕上，直到网页加载完毕

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

进度条应显示在屏幕上，直到网页加载完毕

回答

相关问题