利用InstantClick,简单实现无刷新加载
InstantClick不依赖JQuery,类似PJAX,但是感觉更快一点,因为在访问者点击一个链接之后有200-300ms的延迟,instantclick利用这段时间,预加载页面,当你看到网页上的内容时,其实它刚刚已经做好这件事了。所以会觉得进度条biu地就过去了,秒开。其实,官方文档告诉我们进度条是假的,很像Nprogress,但是不排除在将来的版本中像Nprogress一样判断网页状态做一个真的进度条。它支持的浏览器为IE10+,Firefox 4.0+,Chrome 5.0+,Opera 11.5+。如果在ie的早期版本中,它起不了作用,但也不会影响网站的正常加载。
使用时,加上下面的代码就OK了。
<script src="//cdn.bootcss.com/instantclick/3.0.1/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
默认情况下他是全站Ajax,在不必重新加载的地方加入data-no-instant的声明,如<div data-no-instant>可使它不会在这个区域使用,例如有时会和评论翻页冲突就可以这么做。
顶部的进度条可以根据需要更改颜色:
#instantclick-bar {
background: #ff6850;
}