用jquery显示进度条

Question

我很难在页面加载时显示进度条。在此表中，有一个名称和点列表。有两个按钮“加”和“减”可以改变每个名字的点数。进度条将与点相关联。因此，每次用户点击“减号”或“加号”时，进度条都会更改。

      <tr id = {{ item.name }}>

            <td class = "name" >{{ item.name  }}</td>
            <td class = "points">{{ item.points }}</td>
            <td><button type="button" name="" value="" id = "minus" class="buttonminus">-</button></td>
            <td><button type="button" name="" value="" id = "plus" class="buttonplus">+</button></td>
            <td><div class = "bar_panel"><div id = {{ item.name }} class = "progressbar"></div></td></div>
      </tr>

一旦用户点击“加号”或“减号”，我就会使用以下内容更改进度条。

function vote(kind, name){
$.getJSON("/vote/", {pk: name, vote: kind },

function(json){

   ($(".points").filter('.hovered')).html(json);
   progress(json, name)

 });
 }

有没有办法在不使用JSON的情况下加载页面时显示进度条？

Answer 1

QueryLoader插件可能很有用。检查样本here。

  

QueryLoader2所做的只是扫描图像（和背景图像）的给定元素，并在网站可见之前预加载它们。   此版本已被修改，以便用户更容易实现（特别是那些已经进入jQuery的人。）QueryLoader目前适用于jQuery v1.7.1和IE版本＆gt; 7，Chrome，Safari和Firefox。