jQuery Plugin – Pace

在很多年以前,大家一定都看過整個利用Flash來完成的網頁,因為這樣的網頁檔案會比較大一些,所以在進入時總會有個讀取進度的畫面來讓人判斷目前頁面讀取了多少,但在如今行動裝置處處皆是的狀況之下,全Flash的頁面已經不符合現代人的閱讀需求了,所以現在流行的「單頁式網頁」就僅僅是利用HTML、CSS、javascript…等前端網頁語法來完成的,但如果希望網頁檔案漂亮,又要符合RWD(自適應網頁設計),就還是有可能會讓整個網頁載入的檔案變得比較大一些,今天就跟大家來分享一個jQuery的外掛,這個外掛可以很方便地幫我們在這樣的頁面上加上載入進度,而且不用寫任何的程式唷!

pace 官網截圖
pace 官網截圖

這個外掛的名稱是Pace,大家可以先到他的官方網頁備用載點)上面去下載所需要的PACE.JS和CSS,而CSS的部分主要是拿來決定載入進度的外觀,官網大概提供了14種樣式的CSS讓我們使用。

pace 官網下載說明圖
pace 官網下載說明圖

下載完成後只需要將CSS和JS引用進我們的網頁即可,比較需要注意的是因為這是網頁載入進度,所以最後須要把網頁上傳到網路空間之後,才可以比較正確的看到讀取的效果。

<script type="text/javascript" src="pace.min.js"></script>
<link rel="stylesheet" type="text/css" href="pace.css"/>

參考馬老師製作的範例網頁

You may also like...

15,878 Responses

  1. Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a little bit, but instead of that, this is excellent blog. A great read. I will certainly be back.

  2. Darrelherse表示:

    guvenilir slot siteleri: slot siteleri bonus veren – guvenilir slot siteleri

  3. This site was… how do I say it? Relevant!! Finally I have found something that helped me. Many thanks.

  4. Hey very nice site!! Man .. Beautiful .. Amazing .. I’ll bookmark your website and take the feeds also?I am happy to find so many useful info here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . .

  5. You’ve made some really good points there. I looked on the internet to find out more about the issue and found most individuals will go along with your views on this site.

  6. What?s Happening i’m new to this, I stumbled upon this I’ve found It absolutely useful and it has aided me out loads. I hope to contribute & assist other users like its aided me. Good job.

  7. Greetings from California! I’m bored at work so I decided to check out your website on my iphone during lunch break. I love the information you provide here and can’t wait to take a look when I get home. I’m surprised at how fast your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, amazing blog!

  8. KevinSounc表示:

    http://sweetbonanza.network/# sweet bonanza 90 tl

  9. Darrelherse表示:

    slot oyun siteleri: en iyi slot siteleri 2024 – slot oyun siteleri

  10. KevinSounc表示:

    http://slotsiteleri.bid/# slot kumar siteleri

  11. This is the perfect webpage for everyone who wishes to find out about this topic. You realize a whole lot its almost tough to argue with you (not that I actually would want to…HaHa). You certainly put a new spin on a subject which has been discussed for ages. Excellent stuff, just great.

  12. Darrelherse表示:

    deneme bonusu veren siteler: deneme bonusu veren slot siteleri – 2024 en iyi slot siteleri

  13. I seriously love your blog.. Pleasant colors & theme. Did you make this website yourself? Please reply back as I’m planning to create my own site and would like to learn where you got this from or exactly what the theme is called. Thank you!

  14. Youre so cool! I dont suppose Ive learn something like this before. So nice to find any person with some original ideas on this subject. realy thank you for starting this up. this website is one thing that is wanted on the web, someone with a little bit originality. helpful job for bringing one thing new to the internet!

  15. bobres-iptv表示:

    Good post. I learn something totally new and challenging on blogs I stumbleupon every day. It’s always exciting to read through articles from other writers and use a little something from their web sites.

  16. bobres-iptv表示:

    It’s difficult to find knowledgeable people about this topic, however, you seem like you know what you’re talking about! Thanks

  17. Hi, I do think this is an excellent blog. I stumbledupon it 😉 I may return once again since i have book-marked it. Money and freedom is the best way to change, may you be rich and continue to guide other people.

  18. Good day! I simply wish to offer you a big thumbs up for the great information you’ve got here on this post. I’ll be returning to your website for more soon.

  19. Hi there! This article couldn’t be written any better! Looking at this post reminds me of my previous roommate! He continually kept talking about this. I will forward this post to him. Fairly certain he will have a very good read. I appreciate you for sharing!

  20. Spot on with this write-up, I absolutely feel this site needs a great deal more attention. I’ll probably be back again to see more, thanks for the advice!

  21. 4dresult表示:

    I’m amazed, I must say. Rarely do I come across a blog that’s both educative and engaging, and without a doubt, you’ve hit the nail on the head. The problem is an issue that too few men and women are speaking intelligently about. I’m very happy that I found this in my search for something regarding this.

  22. 4dresult表示:

    There’s certainly a great deal to learn about this issue. I love all of the points you made.

  23. I need to to thank you for this fantastic read!! I definitely enjoyed every bit of it. I’ve got you saved as a favorite to check out new things you post…

  24. Duajmw表示:

    buy colospa without a prescription – generic pletal 100mg order pletal 100 mg online cheap

  25. luxury brands表示:

    Excellent article! We are linking to this great article on our website. Keep up the good writing.

  26. b52club表示:

    Good post. I’m going through many of these issues as well..

  27. b52club表示:

    I’m impressed, I have to admit. Rarely do I encounter a blog that’s both equally educative and entertaining, and let me tell you, you have hit the nail on the head. The issue is something that not enough men and women are speaking intelligently about. Now i’m very happy I came across this during my hunt for something relating to this.

  28. bookmarked!!, I really like your site.

  29. Aw, this was a really good post. Finding the time and actual effort to make a great article… but what can I say… I put things off a lot and never manage to get nearly anything done.

  30. finance tips表示:

    Howdy! This blog post couldn’t be written much better! Looking at this article reminds me of my previous roommate! He constantly kept preaching about this. I am going to forward this post to him. Pretty sure he’s going to have a very good read. Thanks for sharing!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。