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

14,791 Responses

  1. ChesterAsynC表示:

    п»їcialis generic: Generic Tadalafil 20mg price – Generic Cialis price

  2. RalphRem表示:

    https://kamagraiq.shop/# buy kamagra online usa

  3. DanielElorp表示:

    Buy Tadalafil 10mg Generic Tadalafil 20mg price Generic Tadalafil 20mg price

  4. DanielElorp表示:

    Generic Tadalafil 20mg price cialis best price Tadalafil Tablet

  5. DanielElorp表示:

    Viagra online price best price on viagra order viagra

  6. ChesterAsynC表示:

    Kamagra tablets: Sildenafil Oral Jelly – Kamagra tablets

  7. JohnniePaits表示:

    https://tadalafiliq.shop/# cheapest cialis

  8. DavidrAilk表示:

    can we buy amoxcillin 500mg on ebay without prescription amoxicillin 500mg capsule cost amoxicillin 1000 mg capsule

  9. Sycdsg表示:

    buy amoxil pill – amoxicillin drug cost cipro

  10. Edwardjem表示:

    prednisone in canada: prednisolone prednisone – prednisone 10mg for sale

  11. DavidrAilk表示:

    zithromax 500 mg lowest price online zithromax online buy cheap zithromax online

  12. DavidrAilk表示:

    azithromycin amoxicillin order amoxicillin 500mg amoxicillin 500 mg without a prescription

  13. JamesGonRy表示:

    https://clomidall.shop/# where to get clomid without rx

  14. DavidRuils表示:

    how to get generic clomid for sale: can you buy cheap clomid no prescription – can i order clomid online

  15. DavidrAilk表示:

    generic zithromax over the counter how much is zithromax 250 mg generic zithromax over the counter

  16. DavidrAilk表示:

    cost of amoxicillin prescription where can i get amoxicillin 500 mg how to buy amoxicillin online

  17. DavidRuils表示:

    zithromax 500 tablet: where to get zithromax – generic zithromax india

  18. Edwardjem表示:

    amoxicillin pharmacy price: amoxicillin cost australia – amoxicillin 1000 mg capsule

  19. DavidrAilk表示:

    prednisone canada ordering prednisone prednisone 10mg cost

  20. JamesGonRy表示:

    https://prednisoneall.shop/# 10mg prednisone daily

  21. DavidrAilk表示:

    where can i get amoxicillin 500 mg purchase amoxicillin online without prescription amoxicillin no prescription

  22. Lhpdkf表示:

    order augmentin 625mg pill – septra price ciprofloxacin 500mg ca

  23. Edwardjem表示:

    zithromax azithromycin: generic zithromax medicine – can i buy zithromax online

  24. DavidrAilk表示:

    can i get cheap clomid now where can i buy cheap clomid online can you buy generic clomid without a prescription

  25. DavidrAilk表示:

    zithromax generic cost zithromax for sale us where can i get zithromax

  26. JamesGonRy表示:

    https://clomidall.com/# how to get generic clomid without dr prescription

  27. DavidrAilk表示:

    prednisone 5 mg cheapest prednisone oral prednisone purchase canada

  28. DavidRuils表示:

    can i purchase generic clomid pill: where to buy cheap clomid no prescription – can i purchase generic clomid

  29. DavidrAilk表示:

    generic zithromax azithromycin can i buy zithromax over the counter can you buy zithromax over the counter in canada

  30. DavidRuils表示:

    cheap zithromax pills: buy zithromax canada – zithromax online paypal

發佈留言

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