话说,在很久很久以前,我写了一篇文章《谈一谈加入pjax-instantclick.js》。那时候我开始用上instantclick,因为它预加载的功能深深地吸引了我。但是,instantclick正式版年事已高,无奈有些我不习惯的问题,经过我进一步的发现,作者GitHub上已然有所更新。但有些和之前版本不一样的地方需要注意。

基本实现有所变化

在原来,我们的加载该js的方式是使用data-no-instant

<script src="...../instantclick.min.js" data-no-instant></script>

而现在是data-instant-track

<script src="....js" data-instant-track></script>

请注意:data-instant-track不是之前黑名单的意义,相反,该值意味着js将不会反复加载。如果使用之前的data-no-instant,网页的预加载并发数将会随着预加载次数而增加,就是说每次预加载都会同时有多个对该网页的请求。

加载进度条

作者将loading-bar另行做了一个js,但是该js有兼容性的错误。我目前的实现方式为:

  1. 在html中加入<div id="bar"></div>
  2. 在style中加入
    #bar{pointer-events:none;z-index:2147;position:fixed;top:0;left:0;width:100%;height:2px;border-radius:2px;color:hsl(130,100%,50%);background:currentColor;box-shadow:0 -1px 8px;opacity:0}#bar.visible{opacity:1;animation:bar .3s linear infinite;}@keyframes bar{0%,5% {transform:translateX(-100%);} 45%,55% {transform:translateX(0%);} 95%,100% {transform:translateX(100%);}}
  3. 针对instantclik.js,需要修改,见下

instantclik.js进一步

  • isInitialPage可以用来判断是否是预加载来的页面
  • 主要有change、restore、wait、exit几个状态;实现方式:
    instantclick.on("change/...",function(){...})
  • 其中change是最常用的,比如对于bar:
    function hide(){$("#bar").removeClass("visible")}
    function show(){$("#bar").addClass("visible")}
    instantclick.on("change",function(){show(),setTimeout(hide,100)}
    instantclick.on("wait",function(){show()}
  • 进一步,你也可以用change更改class等来实现页面的过渡动画,不过我并没有用过大的过渡动画,因为和我快、简单的原则相悖
  • 和上个版本的文章一样,建议将不太兼容的js放入到change事件函数中

最后,推荐一个js压缩网站 点击Open demo进入压缩窗口,它最大的特点是对if语句的压缩和函数自定义名的压缩,但不方便阅读,所以自己最好保存源码。

2017年11月3日更新

我自己压缩和增加bar的js:instantclick.js

  • 删除了instantclick.init()中的除去'mousedown'以外的模式(只能在鼠标按下的瞬间预加载,鼠标松开时呈现提前60ms+)
  • 内嵌了loading顶部进度条,具体实现方式见上文,现在只需要加入style样式和html代码

使用说明:

  • 引用方式:
    <script src=".../instantclick.js" data-instant-track></script>

    只需要这一条!

  • 除公共库函数(如:jquery.min.js、bootstrap.min.js等)外,非声明类的语句都要加到change
  • 建议公共库的脚本直接使用公共cdn,只要域名不同,instantclick更稳定些!

使用中出现的问题及解决

引用jQuery.Color.js插件时,打开新的链接,颜色总会变成红色

原因是jQuery.Color有一个默认的执行代码_default:"#ffffff",解决方法:在引入js的script中加入data-instant-track属性即可;同时,还有一种用css代替的方法:
方法为使用transition: 1s;,用js改变颜色,会渐变,但是用instantclick在新打开页时动画失效,解决办法是为改变颜色的js代码添加延迟,具体

setTimeout(function(){$("#site-navigation").css('background',$("#topback").data("color"))},300);

引用highlight.js时,偶发性失效

建议替换成谷歌的prettify.js,更简洁,也很够用!

如遇到其他js兼容问题思路一致

新版用法强调

data-instant-track是一个很神奇的标签!

用在包含instant的脚本上会解决页面递增式多长访问;
用在页面内,可以使拥有非公共script的页面以非instant的方式正常加载,使得该页面的非公有的一般脚本能够执行

更新于:2018-01-28