使用pace監控ajax踩過的坑


  使用vue.js開發移動端的活動頁面時,有時候會出現因為請求的數據沒有返回而使得當前活動頁結構混亂或者不美觀,這個時候可以考慮使用pace.js,通過設置參數值,在ajax全部請求結束之前顯示loading圖或其他樣式,用戶體驗會上升很多。

  那么如何設置才能等監聽完所有的ajax請求結束之后才顯示渲染好的頁面呢?具體請參考pace.js  http://github.hubspot.com/pace/docs/welcome/  

  window.paceOptions = {
     ajax: true,
     eventLag: false,
     elements: false
  }  

  這里只說下踩過的坑:在window.paceOption{ } 里設置ajax為true之后,通過charles里的小烏龜調成較慢網速,會發現使用pace.js配置的loading圖或文字等樣式並沒有等數據全部請求完成之后消失,這樣並沒有達到我們想要的效果,通過查閱資料,會發現是pace.js在一些版本里默認ajax只跟蹤GET方法的問題,需要在pace.js引入前添加代碼:

  window.paceOptions = {
    ajax: {
      trackMethods: ['GET', 'POST']
    }
  }

或者把post請求改成get.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM