共计 1689 个字符，预计需要花费 5 分钟才能阅读完成。
InstantClick，让网站的访问速度取得更大的晋升，这是一个 js 插件，只须要简略配置到你的网站，即可实现网站页面的预加载。
演示
下面是我的演示，当点击 a 标签的时候，跳转到一个页面，咱们能够看到，浏览器是没有刷新页面的，而是间接更改了浏览器 url，全程没有刷新的动作，然而内容曾经是另一个页面了。
这里提供一个网友的博客给大家操作查看一下演示：https://licoy.cn/
代码
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title> 无刷新预加载页面 </title>
<script src="instantclick.min.js"></script>
<style type="text/css">
#instantclick-bar {display: none;}
</style>
</head>
<body>
<div>
<h2><a href="page.php?url=baidu"> 百度一下，你就晓得 </a></h2>
<h2><a href="page.php?url=taobao"> 淘宝，让天下没有难做的生意 </a></h2>
<h2><a href="page.php?url=qq"> 腾讯游戏，毁我青春 </a></h2>
</div>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>
page.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="margin:0;">
<?php
header("Content-type:text/html;charset=utf-8");
if ($_GET["url"] == 'baidu') {
echo "<title> 百度 </title>";
// echo "<h1> 你好，我是李彦宏 </h1>";
echo "<iframe src='http://www.baidu.com'style='width:100%;height:100%;position:fixed;'frameborder='0'></iframe>";
}else if ($_GET["url"] == 'taobao') {
echo "<title> 淘宝 </title>";
// echo "<h1> 你好，我是马云 </h1>";
echo "<iframe src='http://www.taobao.com'style='width:100%;height:100%;position:fixed;'frameborder='0'></iframe>";
}else if ($_GET["url"] == 'qq') {
echo "<title> 腾讯 </title>";
// echo "<h1> 你好，我是马化腾 </h1>";
echo "<iframe src='http://www.qq.com'style='width:100%;height:100%;position:fixed;'frameborder='0'></iframe>";
}else{echo "<h1> 别乱来...</h1>";}
?>
</body>
</html>如何应用
其实很简略的，只须要将插件的 js 引入页面，而后初始化即可，上面是咱们要引入的文件。
<script src="instantclick.min.js"></script>而后，在网站 </body> 标签之前退出这句
<script data-no-instant>InstantClick.init();</script>这样，你的网站也能疾速接入无刷新的感觉的预加载技术！
官网
间接去官网下载生产版本的 js 插件吧！
link:http://instantclick.io/
本文作者
Author:TANKING
Date:2021-01-13
Wechat:sansure2016
Web:http://www.likeyun.cn/
Qrcode:Join in
正文完