InstantClick.js插件，让网页提早预加载，网站无刷新跳转页面

时间 2021-01-14

标签 php css html 浏览器 app 网站 url spa 插件 code 栏目 JavaScript 繁體版

原文原文链接

InstantClick，让网站的访问速度得到更大的提高，这是一个js插件，只须要简单配置到你的网站，便可实现网站页面的预加载。php

演示

上面是个人演示，当点击a标签的时候，跳转到一个页面，咱们能够看到，浏览器是没有刷新页面的，而是直接更改了浏览器url，全程没有刷新的动做，可是内容已是另外一个页面了。css

这里提供一个网友的博客给你们操做查看一下演示：https://licoy.cn/html

代码

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.phpapp

<!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>标签以前加入这句url

<script data-no-instant>InstantClick.init();</script>

这样，你的网站也能快速接入无刷新的感受的预加载技术！spa

官网

直接去官网下载生产版本的js插件吧！
link:http://instantclick.io/插件

本文做者

Author:TANKING
Date:2021-01-13
Wechat:sansure2016
Web:http://www.likeyun.cn/
Qrcode:Join incode