预加载插件InstantClick.js的使用

前言

最近在浏览网站时,发现很多局部刷新的网站(如Github,淘宝等)在加载时顶部都会有一个加载进度条,并且网页打开速度非常快。在一番查找之后,发现使用的是一款叫做InstantClick.js网页插件。InstantClick 使用了 pushState 和 Ajax 技术(即Pjax)。

工作原理

在用户需要点击一个链接之前,鼠标会先悬停在这个链接上,这时InstantClick就会通过ajax技术预加载目标网页的内容,通常这个时间非常短。当用户点击链接时InstantClick就会利用pushState技术改变地址栏地址而不刷新页面,然后将预加载页面的title、body替换当前的title、body的内容实现局部刷新的效果,这样浏览器不需要重新解析渲染页面内容。加载的过程中顶部将会显示一个进度条(具体效果请参考本博客)。

InstantClick使用

InstantClick使用方法很简单,只要下载InstantClick后将其引入页面并执行初始化函数即可,其中data-no-instant是为了解决某些网站统计插件白屏问题。

以a.html和b.html两个页面为例(代码如下),先访问a页面时,插件会进行初始化,这时通过a页面访问b页面时就会进行预加载,此后通过b页面访问a页面时也会预加载。如果先访问b页面,这时通过b页面访问a页面不会进行与加载,此后通过a页面访问b页面会进行预加载。

a.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a</title>
</head>
<body>
    <a href="b.html">Go to b.html</a>
    <script src="instantclick.js" data-no-instant></script>
    <script data-no-instant>InstantClick.init();</script>
</body>
</html>

b.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>b</title>
</head>
<body>
    <a href="a.html">Go to a.html</a>
</body>
</html>

InstantClick进度条

当加载了InstantClick插件后,访问页面时,顶部会显示一个蓝色的进度条。我们可以通过css来对其进行自定义,这里以修改颜色和隐藏进度条为例。

修改颜色

#instantclick-bar {
    background: #66ccff;
}

隐藏进度条

#instantclick {
    display: none;
}
原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录