instantclick通过回调函数自定义加载动画

这几天一直在研究instantclick的加载动画处理 最近在用一个叫via的浏览器 他的状态栏自适应方案是舔页面上方的颜色来决定浏览器整体色调 但由于instantclick原生的进度条会影响浏览器的舔色 搞得浏览器的主色调是和instantclick的色调是一致的而和全站主题色调相反...为了解决这个尴尬的情况...

改造思路来源

前几天问了下友人Cdalao......

@尚寂新 取消掉默认的进度条，然后在instantclick 的两个回调函数里面写开启动画、关闭动画相关代码就可以
wait、change 分别是这两个回调函数

然后 又参照了下instantclick的官方文档 官方给出了回调函数的使用方式,以change为例

InstantClick.on('change', yourCallback);

下面,我们就可以对上下文介绍的内容开刀了

实际操作

首先 搞一个css预载动画(CSS和HTML自行解决本文不再描述)
注:预加载动画的css层必须要置于页面最顶层,如使用z-index: 100; 默认样式一定要display: none;
下面大致描述一下HTML上的样子 方便下面解释

<div id="loading" style="display: none; z-index: 100;">
    <!-- code in here -->
</div>

然后,处理回调函数代码
注意:此处代码依赖jQuery,如不想用jq的话请用原生js替代相应部分

InstantClick.on('wait', function(){
  $("#loading").show();
});
InstantClick.on('change', function(){
  $("#loading").hide();
});

再次注意:回调函数代码应写在InstantClick.init();的前面
然后 添加下面的CSS,使原生instantclick进度条不显示

#instantclick {
  display: none;
}

至此,结束 一个自定义加载页面的改动就做好了