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進度條實現

回答

相關問題