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

TANKING 2021/1/14 5:08:18

InstantClick,让网站的访问速度获得更大的提升,这是一个js插件,只需要简单配置到你的网站,即可实现网站页面的预加载。演示上面是我的演示,当点击a标签的时候,跳转到一个页面,我们可以看到,浏览器是没有刷新页面的,而是直接更改了浏览器url,全程没有刷新的动作,…

InstantClick,让网站的访问速度获得更大的提升,这是一个js插件,只需要简单配置到你的网站,即可实现网站页面的预加载。

演示

image

上面是我的演示,当点击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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[InstantClick.js插件,让网页提前预加载,网站无刷新跳转页面]http://www.zyiz.net/tech/detail-150908.html

上一篇:Vue3.0 + antdV 实现的后台管理项目

下一篇:RenderServer 前端部署、接口测试及文档

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程