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...

21,933 Responses

  1. Hermanges表示:

    buy paxlovid online paxlovid pharmacy paxlovid generic

  2. GeorgeEteli表示:

    amoxicillin 250 mg capsule: cost of amoxicillin prescription – amoxicillin over the counter in canada

  3. Hermanges表示:

    prednisone 5 mg tablet cost 10 mg prednisone prednisone 80 mg daily

  4. Raymondsmero表示:

    http://clomid.site/# cost of clomid now

  5. JasonWal表示:

    Paxlovid over the counter: paxlovid covid – paxlovid buy

  6. Hermanges表示:

    online prednisone buy cheap prednisone prednisone 30 mg daily

  7. JasonWal表示:

    how much is amoxicillin prescription: amoxicillin 500mg prescription – amoxicillin without rx

  8. JasonWal表示:

    where can i buy cheap clomid without insurance: cost clomid tablets – cheap clomid without rx

  9. JasonWal表示:

    paxlovid price: paxlovid cost without insurance – buy paxlovid online

  10. BrianDutle表示:

    https://amoxil.icu/# amoxicillin 500mg capsule

  11. Raymondsmero表示:

    http://clomid.site/# clomid prices

  12. Hermanges表示:

    Paxlovid over the counter buy paxlovid online paxlovid pharmacy

  13. JasonWal表示:

    order generic clomid pills: order cheap clomid without rx – where can i buy cheap clomid price

  14. JasonWal表示:

    buying clomid prices: how can i get cheap clomid without prescription – where to get generic clomid without dr prescription

  15. JasonWal表示:

    where can i buy generic clomid without insurance: buying generic clomid without prescription – can you buy cheap clomid without insurance

  16. JasonWal表示:

    can you buy amoxicillin uk: can i buy amoxicillin over the counter – amoxicillin over counter

  17. JasonWal表示:

    buy cheap clomid prices: how to get cheap clomid for sale – how to get clomid without rx

  18. такими表示:

    Thanks for your marvelous posting! I certainly enjoyed reading it, you may be a great author.I will ensure that I bookmark your blog and definitely will come back in the foreseeable future. I want to encourage continue your great job, have a nice holiday weekend!

  19. Hermanges表示:

    Paxlovid buy online Paxlovid over the counter paxlovid buy

  20. JasonWal表示:

    clomid buy: how to get cheap clomid for sale – can you buy clomid prices

  21. Raymondsmero表示:

    http://paxlovid.win/# Paxlovid buy online

  22. JasonWal表示:

    prednisone 2 mg: buying prednisone without prescription – buy prednisone with paypal canada

  23. JasonWal表示:

    prednisone 10 tablet: prednisone 10 mg daily – buy prednisone 10mg

  24. BrianDutle表示:

    http://amoxil.icu/# generic for amoxicillin

  25. JasonWal表示:

    prednisone medicine: prednisone 50 mg price – price of prednisone tablets

  26. JasonWal表示:

    Paxlovid buy online: paxlovid india – paxlovid pharmacy

  27. Hermanges表示:

    where can i get prednisone drug prices prednisone non prescription prednisone 20mg

  28. JasonWal表示:

    cipro for sale: antibiotics cipro – cipro online no prescription in the usa

  29. JasonWal表示:

    ciprofloxacin generic: where can i buy cipro online – buy cipro online

  30. Raymondsmero表示:

    https://amoxil.icu/# buy amoxicillin 500mg usa

發佈留言

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