InstantClick.js_让网页提前预加载，网站无刷新跳转页面

Web前端开发网

fly63.com

首页资源工具文章教程栏目

InstantClick.js

网站地址:http://instantclick.io/

GitHub:https://github.com/dieulot/instantclick

描述信息:让网页提前预加载，网站无刷新跳转页面

访问官网

GitHub

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

演示

上面是我的演示，当点击a标签的时候，跳转到一个页面，我们可以看到，浏览器是没有刷新页面的，而是直接更改了浏览器url，全程没有刷新的动作，但是内容已经是另一个页面了。

代码

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 ></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' frameborder='0'></iframe>";
        }else if ($_GET["url"] == 'taobao') {
            echo "<title>淘宝</title>";
            // echo "<h1>你好，我是马云</h1>";
            echo "<iframe src='http://www.taobao.com' frameborder='0'></iframe>";
        }else if ($_GET["url"] == 'qq') {
            echo "<title>腾讯</title>";
            // echo "<h1>你好，我是马化腾</h1>";
            echo "<iframe src='http://www.qq.com' frameborder='0'></iframe>";
        }else{
            echo "<h1>别乱来...</h1>";
        }
    ?>
</body>
</html>

如何使用

其实很简单的，只需要将插件的js引入页面，然后初始化即可，下面是我们要引入的文件。

<script src="instantclick.min.js"></script>

然后，在网站</body>标签之前加入这句

<script ></script>

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

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3244

热门资源

swiper

目前应用较广泛的移动端网页触摸内容滑动js插件

官网

GitHub

GitHub

IScroll是移动页面上被使用的一款仿系统滚动插件。

官网

GitHub

wangEditor

基于javascript和css开发的 Web富文本编辑器

官网

GitHub

ueditor

由百度web前端研发部开发所见即所得富文本web编辑器

官网

GitHub

highlight

Highlight.js 是一个用 JavaScript 写的代码高亮插件，在客户端和服务端都能工作。

官网

GitHub

UglifyJS

一个js 解释器、最小化器、压缩器、美化器工具集

官网

GitHub

lozad.js

高性能,轻量级,可配置的懒加载图片工具

官网

GitHub

Sortable.js

简单灵活的 JavaScript 拖放排序插件

官网

GitHub

validate.js

表单提供了强大的验证功能,让客户端表单验证变得更简单

官网

GitHub

Draggin.js

一款兼容移动手机的js拖拽插件

官网

GitHub

lazysizes.js

响应式图像延迟加载JS插件【懒加载】

官网

GitHub

类似于InstantClick.js的资源

lazysizes.js

响应式图像延迟加载JS插件【懒加载】

官网

GitHub

jsonhero-web

一款JSON可视化工具

官网

GitHub

jsAnim

一个简单而实用的js动画框架

官网

GitHub

rainbow

Javascript 编写的简单的语法高亮插件

官网

GitHub

unified

通过语法树解析、检查、转换和序列化内容的接口

官网

GitHub

PDF.js

PDF.js 是一个用 HTML5 构建的 PDF 查看器

官网

GitHub

You-Dont-Need-Momentjs

可用于替换moment.js + ESLint插件的date-fns 或原生函数列表

点击进入

GitHub

wangEditor

基于javascript和css开发的 Web富文本编辑器

官网

GitHub