進度條我們通常在文件上傳或頁面等待時要有一個效果,告訴客戶自己的頁面在加載了,下面來看一個wordpress簡單頁面載入進度條實現方法.

下面是我寫的方法,只需要添加一處js就可以了,并且是在頁面全部加載完畢之后才跳到100%的,許多朋友要我寫進度條,不是我不想寫,是因為之前有些錯誤,現在是已經修正了,所以就貼出來了,代碼很少,部分地方已經注釋了.

最后更新:2013年3月28日 21:56:21

1. /*************************************************** 
2. ** 進度條 
3. ** 2012年11月15日0:06:06 
4. ***************************************************/ 
5. $(function() 
6. { 
7.  // 頁面準備完畢后就開始移動進度條到95% 
8.  $('header .loading').animate({'width':'95%'},9000); 
9.  // 在頁面全部加載完畢之后 
10.  $(window).load(function() 
11.  { 
12.   // 停止進度條動畫，直接移動到100% 
13.   $('header .loading').stop(1,1).animate({'width':'100%'},333,function() 
14.   { //Vevb.com 
15.    // 到100%完畢后隱藏進度條 
16.    $(this).addClass('done').delay(333).slideUp(333); 
17.   }); 
18.  }); 
19. });