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