使用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