针对新版请点我

之前加过instantclick.js来实现无刷新加载页面,但因为js不兼容原因,放弃了,最近因为@热腾网的评论,同时也基于精简网站加载项和网站效果的目的,又加入了instantclick.js

jquery-pjax.js和instantclick.js区别

首先,要说的是jquery-pjax.js和instantclick.js原理是一样的,但目的是不同的,相应的效果也不相同

项目 jquery-pjax.js instantclick.js
主要目的 减少网络传输量,节省带宽,同时达到加速的效果 预读页面,加速页面呈现速度
扩展项 支持过度动画;指定刷新范围 支持自定义进度条颜色;指定刷新范围
使用场景 配置好后端,减少页面加载大小,或喜欢过度动画 仅仅只是配置了前端,目的在于预加载页面

jquery-pjax.js测试页面:http://pjax.herokuapp.com/

instantclick.js测试页面:http://instantclick.io/click-test

instantclick.min.js实现方式

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

init()可选参数:
'mousedown'  //鼠标点击时加载
/*说明
*一般鼠标点击有两个动作:点下去、释放
*页面在释放后呈现
*点下去时开始预加载
*/
50           //鼠标悬浮50ms后自动预加载
'hover'      //默认,不用填写

不同参数效果测试:官方测试

具体查看:官方文档

不兼容解决方法

说明:默认刷新区域为body,请保证内容在body中

百度统计事件:

<script data-no-instant>
InstantClick.on('change', function() {
_hmt.push(['_trackPageview', location.pathname + location.search]);
});
InstantClick.init('mousedown');
</script>

其它引入脚本方式:

<script data-no-instant>
InstantClick.on('change', function() {
_hmt.push(['_trackPageview', location.pathname + location.search]);
var script=document.createElement ("script");
script.type="text/javascript";
script.src="/xxx.js";
script.async="async";   //看具体情况
document.getElementsByTagName("head")[0].appendChild(script);
});
InstantClick.init('mousedown');
</script>

简单的Class监控添加事件只需添加://通过该方式移除了superfish.min.js等

<script data-no-instant>
InstantClick.on('change', function() {
$('.sub-menu').toggleClass('swing animated');
});
InstantClick.init('mousedown');
</script>

注意

  • 库类的js一般不受影响,主要受影响的是执行类js
  • 可以直接将执行脚本加入到instantclick.mini.js文件中!(博主因为能用公共库就不自引源的原则,没有自定义instantclick.mini.js文件)
  • 一些特殊页面请在<a>标签加入data-no-instant属性
  • data-no-instant属性在js的<script>标签中不一定管用

-->>2017.10.26更新新版instantclick点我

ps:我将页面布局微调了一下,去掉一些占用较大的效果,你有感觉吗?

有什么建议可以提出来(……)

更新于:2017-11-21