使用spin.js優化等待ajax傳回時的頁面效果

[本文出自天外歸雲的部落格園]

最近在做一個JIRA資訊統計的系統，在統計JIRA關聯資訊的過程中由于需要等待ajax傳回結果到前端，時間較長，是以要添加一段等待時的loading畫面，使用spin.js實作效果如下：

使用方法：

1. 在js函數中準備彈出loading效果的地方加上如下代碼，彈出loading畫面，以下為“調用代碼”：

2. 在js函數中ajax傳回結果後的地方加上如下代碼，提示完成并關閉loading畫面，以下為“關閉代碼”：

另外：和Spring MVC+Freemarker結合的情況下，如果不用ajax的話，可以為相應的元素（例如：a标簽）添加onclick事件，在onclick對應函數中添加“調用代碼”。而href對應要跳轉的頁面。頁面跳轉請求會被後端controller處理，處理完成後傳回相應的前端ftl頁面，這時候頁面會自動重新整理，loading動畫也将消失。