JQuery进度条实现

我发现了这个Jquery进度条功能，我想简单地用它来显示我的网页加载时的进度条。由于我的页面加载速度有点慢，因此提醒用户该页面未停止加载。以下是javascript和css部分。现在如何在html部分实现它？我在html body中包含什么？JQuery进度条实现

<script type="text/javascript" src="js/jquery.progressbar.js"></script> 
    <script type="text/javascript"> 
     var progress_key = '<?= $uuid ?>'; 

     $(document).ready(function() { 
      $("#pb1").progressBar(); 
      $("#pb2").progressBar({ barImage: 
      'images/progressbg_yellow.gif'}); 
      $("#pb3").progressBar({ barImage: 
      'images/progressbg_orange.gif', showText: false}); 
      $("#pb4").progressBar(65, { showText: false, barImage: 
      'images/progressbg_red.gif'}); 
      $(".pb5").progressBar({ max: '2000', textFormat: 
      'fraction', callback: function(data) { if (data.running_value == 
       data.value) { 
      alert("Callback example: Target reached!"); } }}); 
      $("#uploadprogressbar").progressBar(); 
     }); 

</script> 
<style type="text/css"> 
     table tr { vertical-align: top; } 
     table td { padding: 3px; } 
     div.contentblock { padding-bottom: 25px; } 
     #uploadprogressbar { display: none; } 
</style>

感谢

来源

2012-05-29 Dexter Schneider

根据你引用的演示需要

<span class="progressBar" id="pb1"></span>

与任一ID PB1 .. PB4

http://jsfiddle.net/RUBSx/1/

来源

2012-05-29 15:14:03

感谢。但它会与我的网页中的所有其他元素一起加载。我希望它在所有其他加载之前首先加载。 –

您不只是插入它，它的工作神奇。这个插件需要被告知如何更新当前的进度。你问什么取决于什么（内容）\你如何加载页面。 –

JQuery进度条实现

回答

相关问题