作者: s7ooL 发布时间: (2015-06-29 14:18:11) 阅读次数: 2708

通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

InstantClick的安装

安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如:

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

InstantClick可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。由于不懂JS,不知道这会不会影响统计。

InstantClick工作原理

InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。

InstantClick的进度条

默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色:

#instantclick-bar {
    background: white;
}

也可以隐藏进度条:

#instantclick {
    display: none;
}

 ----e0d.

我的运行在飞速比特熊上的小站(有没有用InstantClick?哦,我真的不知道):www.lvya.cc

评论 20条评论 回复
登陆后才可以评论。 登陆
鱼昆鹏博客 · 回复

可以,用了以后感觉速度快了很多

寒光 · 回复

哇哦~

s7ooL · 回复

@yanleijava  sweat_smile

yanleijava · 回复

这个不应该是我的文章吗

s7ooL · 回复

@tv1314  trollface

s7ooL · 回复

@tianyi  trollface似乎是有,测试完没删代码

tianyi · 回复

@s7ooL  lvya这个没使用?那页面源码里的instantclick.min.js是什么鬼?cold_sweat

s7ooL · 回复

@tianyi  joy我没使用

tianyi · 回复

看了一下你的网站使用了instantclick,效果并不如宣传的那么好。因为页面很大一部分地方都重新加载,看起来还是有闪屏(不加载的地方所占比例太小) = =#

moli · 回复

@tv1314  sweat_smile不清楚了

tv1314 · 回复

@moli  

开始还以为发现了一个看电影的新站,结果全是盗版mp4ba的 我一直在那个站找电影

s7ooL · 回复

@约零  smirk

约零 · 回复

joy噗,设置上后果然一堆问题。瀑布流挂掉,页面样式也错位了。

约零 · 回复

这个好像很有趣,研究看看,希望能用到discuz上。

s7ooL · 回复

@moli  cold_sweatcold_sweatcold_sweat

moli · 回复

@s7ooL  花钱,花钱,花钱。。。

s7ooL · 回复

@moli  QQ的现在已经停止创建新的栏目了!163的定要涂额平台需要vip邮箱worried

moli · 回复

@s7ooL  expressionlessqq邮箱订阅不是挺好吗。。。163呢

s7ooL · 回复

@moli  cold_sweatqq邮箱订阅腾讯给关闭了,求推荐啊

moli · 回复

smirk666,你的站不错,建议加上订阅功能,将近期的大片发给用户。