barba.js 原理就是在a页面中显示b页面的内容，样式为刷新，给用户以页面跳转后无刷新体验，注意样式命名，ab页面引用的样式和js要相同

  • 可以在页面之间创建良好的转换，增强用户的体验。
  • 减少HTTP请求 （为什么重新加载每个页面上的css / js？）
  • 可以使用预取和缓存来加快导航

a.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">

    <link href="css/a.css" rel="stylesheet">

</head>

<body>

<div id="barba-wrapper">

    <div class="barba-container">

        <div class="wrap">

            <div>

                <a href="b.html">页面跳转到b</a>

            </div>

        </div>

    </div>

</div>

</body>

<script src="js/barba.min.js" type="text/javascript"></script>

<script>

    Barba.Pjax.start();

</script>

</html>

b.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">

    <link href="css/a.css" rel="stylesheet">

</head>

<body>

<div id="barba-wrapper">

    <div class="barba-container">

        <div class="wrap1">

            <div>

                <a href="a.html">页面跳转到a</a>

            </div>

        </div>

    </div>

</div>

</body>

<script src="js/barba.min.js" type="text/javascript"></script>

<script>

    Barba.Pjax.start();

</script>

</html>

a.css

.wrap {

    margin: 50px;

    width: 2500px;

    height: 2500px;

    background: url('../images/30.png') 100% 100%;

}

.wrap1 {

    margin: 50px;

    width: 750px;

    height: 930px;

    background: url('../images/36.png') repeat;

}

barba.js 优化页面跳转用户体验的更多相关文章

  1. JS实现页面跳转 浏览器地址栏保持不变

    JS实现页面跳转 浏览器地址栏保持不变 在公司内部框架中,发现点击超链接,页面发生跳转,而浏览器地址栏URL始终保持不变.分析其实现机制,响应A标签onclick事件,通过Ajax向服务器端发送htt ...

  2. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  3. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  4. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  5. [HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文)

    要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...

  6. js实现页面跳转

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  7. 5阻止A默认行为和JS实现页面跳转的方法

    <!--HTML中阻止A标签的默认行为: href="javascript:;" href="javascript:void 0;"--><! ...

  8. 关于JS的页面跳转

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  9. js控制页面跳转,清缓存，强制刷新页面

    单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...

随机推荐

  1. 贪心算法之Kruskal

    克鲁斯卡尔Kruskal算法同Prim算法一样,都是求最小生成树.Kruskal是不断的找最短边,加入集合,且不构成回路. 所以,我们可以给每个点定义一个集合,一边的起点和终点查看是否属于同一集合,如 ...

  2. LeetCode：26. Remove Duplicates from Sorted Array（Easy）

    1. 原题链接 https://leetcode.com/problems/remove-duplicates-from-sorted-array/description/ 2. 题目要求 给定一个已 ...

  3. 用intellij Idea加载eclipse的maven项目全流程

    eclipse的maven项目目录 全流程 加载项目 打开intellij Idea file -> new -> module from existing Sources  选择.pom ...

  4. 【PHP】进一法取整、四舍五入取整、忽略小数等的取整数方法大全

    PHP取整数函数常用的四种方法,下面收集了四个函数:经常用到取整的函数,今天小小的总结一下!其实很简单,就是几个函数而已--主要是:ceil,floor,round,intval PHP取整数函数常用 ...

  5. 安装一个apk文件源代码

     /**   * 安装一个apk文件   *   * @param file   * 要安装的完整文件名   */  protected void installApk(File file) {   ...

  6. windows下网络命令----Tracert命令详解

    现在网络四通八达,网线光纤基站卫星,只要运营商能收费的地方,就有网络,覆盖了全世界所有的区域.彻底改变了以前通讯基本靠吼的情况.那么宽广的网络世界,超过100米就得需要中继放大信号的网线,即使现在的光 ...

  7. 实用的placeholder插件，兼容IE下的placeholder，jquery插件

    placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 /* * jQuery placeholder, fix for IE6,7,8,9 * @website itmy ...

  8. 【转】用ASP.NET Core 2.1 建立规范的 REST API -- 缓存和并发

    原文链接:https://www.cnblogs.com/cgzl/p/9165388.html 本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/901 ...

  9. Java并发基础--线程安全

    一.线程安全 1.线程安全的概念 线程安全:某个类被单个线程,或者多个线程同时访问,所表现出来的行为是一致,则可以说这个类是线程安全的. 2.什么情况下会出现线程安全问题 在单线程中不会出现线程安全问 ...

  10. Windows server 2012 R2开机进入cmd，关闭后黑屏问题

    原因分析: 因为自己在卸载IIS的时候,不小心卸载了.net framework,系统没有了图形界面(由完整模式Full变为了核心模式core),需要重新恢复.net framework4.5. 解决 ...