【收藏整理】InstantClick:简单无刷新加载

今天在linyo博客发现一款给wordpress博客简单无刷新加载的利器,现在好多人都在用全站AJAX,感觉好高大上,无奈代码小白只能看看就行了,这次用了这个利器,瞬间感觉自己也高大上了。

引用linyo博客原文章的话就是:

它不依赖JQuery,类似PJAX,但是感觉更快一点,因为在访问者点击一个链接之后有200-300ms的延迟,instantclick利用这段时间,预加载页面,当你看到网页上的内容时,其实它刚刚已经做好这件事了。所以会觉得进度条biu地就过去了,秒开。其实,官方文档告诉我们进度条是假的,很像Nprogress,但是不排除在将来的版本中像Nprogress一样判断网页状态做一个真的进度条。它支持的浏览器为IE10+,Firefox 4.0+,Chrome 5.0+,Opera 11.5+。如果在ie的早期版本中,它起不了作用,但也不会影响网站的正常加载。

使用方法是将下面代码引用到主题中

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

InstantClick的使用很简单,只需要引用js和加一句js让它启用就可以了。
而默认情况下他是全站Ajax,在不必重新加载的地方加入data-no-instant的声明,如<div data-no-instant>可使它不会在这个区域使用,例如有时会和评论翻页冲突就可以这么做。这样一来,它已经可以正常使用了。顶部的进度条可以修改颜色,使用一句css。

#instantclick-bar {
  background: #ff6850;
}

当然,直接display:none也是可以的。还有关于怎么同时使用谷歌分析及加载css和js的问题,见官方文档。我只是个小小的搬运工啦 =A=

本文转自:http://linyo.me/instantclick.html

本文共 16 个回复

  1. JV says:
    来试试会不会和评论冲突。 :idea:
    1. JV says:
      @JV 确有问题,处理一下吧。
  2. 大肥羊 says:
    这个会与 ajax 冲突,懒得折腾了。
  3. zllz says:
    这个只要过滤加载就好了!文档已经给出方法了!
  4. 约零 says:
    看到这js库就觉得很赞,给discuz试了下,各种不兼容。噗……

发表留言,喵!