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,693 Responses

  1. AntoniaSut表示:

    online apotheke preisvergleich: ohne rezept apotheke – ohne rezept apotheke

  2. AntoniaSut表示:

    internet apotheke: eu apotheke ohne rezept – online apotheke versandkostenfrei

  3. Donaldcoums表示:

    п»їpharmacie en ligne france: п»їpharmacie en ligne france – vente de mГ©dicament en ligne

  4. Roberthep表示:

    online apotheke online apotheke preisvergleich gГјnstigste online apotheke

  5. WilliamTeath表示:

    farmacie online affidabili: Farmacie on line spedizione gratuita – comprare farmaci online all’estero

  6. AntoniaSut表示:

    farmacia online madrid: farmacia en casa online descuento – farmacias online seguras en españa

  7. Donaldcoums表示:

    Farmacia online miglior prezzo: farmacia online senza ricetta – farmacia online senza ricetta

  8. Roberthep表示:

    farmacia online farmacie online sicure acquistare farmaci senza ricetta

  9. Roberthep表示:

    farmacia barata farmacias online seguras farmacia online 24 horas

  10. WilliamTeath表示:

    farmacia online madrid: farmacia barata – farmacias online seguras

  11. AntoniaSut表示:

    farmacie online affidabili: farmacie online autorizzate elenco – farmacia online più conveniente

  12. AntoniaSut表示:

    farmacia online madrid: farmacia barata – farmacia online envío gratis

  13. RalphSnize表示:

    farmacie online autorizzate elenco: farmaci senza ricetta elenco – farmaci senza ricetta elenco

  14. Roberthep表示:

    online apotheke gГјnstig apotheke online apotheke online

  15. AntoniaSut表示:

    pharmacie en ligne livraison europe: vente de médicament en ligne – Pharmacie Internationale en ligne

  16. Roberthep表示:

    Farmacie on line spedizione gratuita farmacie online affidabili migliori farmacie online 2024

  17. Donaldcoums表示:

    comprare farmaci online con ricetta: farmacie online sicure – Farmacia online miglior prezzo

  18. Roberthep表示:

    vente de mГ©dicament en ligne pharmacie en ligne france livraison internationale pharmacie en ligne

  19. AntoniaSut表示:

    farmacia online españa: farmacia online envío gratis – farmacias direct

  20. AntoniaSut表示:

    pharmacie en ligne france fiable: Achat médicament en ligne fiable – pharmacie en ligne avec ordonnance

  21. Roberthep表示:

    acquistare farmaci senza ricetta Farmacia online miglior prezzo acquistare farmaci senza ricetta

  22. VernonRib表示:

    http://eufarmacieonline.com/# farmacie online sicure

  23. Uwohdq表示:

    acne treatment something – acne medication choice acne treatment mysterious

  24. WilliamTeath表示:

    farmacia online envГ­o gratis: farmacia online madrid – farmacias online seguras en espaГ±a

  25. VernonRib表示:

    http://eufarmaciaonline.com/# farmacia online 24 horas

  26. AntoniaSut表示:

    acquisto farmaci con ricetta: Farmacia online più conveniente – farmacia online

  27. VernonRib表示:

    https://eufarmaciaonline.shop/# farmacia barata

  28. Roberthep表示:

    farmacias online seguras en espaГ±a farmacia online 24 horas farmacias online seguras

  29. Ddboxp表示:

    asthma medication young – inhalers for asthma upon inhalers for asthma quality

  30. Roberthep表示:

    acquistare farmaci senza ricetta comprare farmaci online con ricetta farmaci senza ricetta elenco

發佈留言

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