用spin.js做出好看loading效果

4月 11, 2017


因為剛好有用到這個效果順便整理一下。



頁面資料多到要花時間讀取時,有時候第一秒點進去就會先看到缺圖、缺字、缺東缺西的問題,第一印象瀏覽的觀感上不是太好,所以為了讓使用者操作的流暢度更好,在頁面讀取完成前顯示這個loading bar,可以提醒使用者網頁正在讀取中,也可以避免第一時間進網頁就破圖不好看又無法順暢操作的問題。

不過找了半天覺得網路上教學文都沒有很清楚,自己寫一篇來筆記一下好了。
我先找到一個超棒的套件叫:「Spin.js」。



Spin.js這套件可以非常自由的設定你想要顯示的讀取條樣式(幾乎你看過的圓形讀取條都可以做出來),也提供了JS套件下載。我特別在CodePen把我自己用法紀錄起來,本來想直接貼在這裡的,可是貼在這似乎圓形讀取條沒辦法正常顯示,所以請直接到CodePen去看效果

註解我也全用英文寫在裡面了




點進去可以看到的code如下圖。最後強迫症發作還是特別做了圖說明一下這些區塊的用意:





至於讀取順序的問題,chrome會先讀取html本身的code再來讀取其他link,
所以擺放的順序是有用意的。查了一下資料發現chrome的開發者工具裡的「Network」有非常清楚的列表可以看chrome在讀取的時候先後load了哪些檔案,甚至是讀取花了多少時間,對網頁開發蠻有幫助的,請鄉親朋友多加利用Q_Q



You Might Also Like

0 意見