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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。