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的资源

autosize

根据内容的大小自动调整Textarea

官网

GitHub

list.js

给现有的表格、列表以及各种 HTML 元素提供添加、搜索、排序功能的库

官网

GitHub

Split.js

一款可调节大小的拆分视图面板纯Js插件

官网

GitHub

bootstrap-calendar

基于bootstrap的全视图日历

官网

GitHub

UglifyJS

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

官网

GitHub

PhotoSwipe

为移动触摸设备设计的相册/画廊

官网

GitHub

Awaity.js

功能强大、轻量级bluebird.js替代品

点击进入

GitHub

popper.js

一个扩展性较好的 tooltips 提示类 JS 插件

官网

GitHub