網站有時為了增強用戶體驗,會用加載進度條來提示用戶,但是圖片加載是異步的,這里就要用點小技巧才好,下面講講wordpress頁面加載進度條的實現方法.

谷歌百度一下進度條,99%的內容都是這么說的,在頁面頭部寫一個進度條移動到10%,然后在頁面中部使進度條移動到50%,然后在頁面尾部使進度條移動到100%,這么做看起來很完美很符合常理,但這么做有個弊端,因為圖片的加載是異步加載的,有時候圖片什么的沒有加載完畢,進度條就已經100%了,所以判斷進度條到100%就必須在頁面所有元素全部載入之后才可以.

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

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

好了,現在來看你的wordpress,是不是感覺在加載的時候心里有底一些？