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

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

a.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
  6.     <link href="css/a.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div id="barba-wrapper">
  10.     <div class="barba-container">
  11.         <div class="wrap">
  12.             <div>
  13.                 <a href="b.html">页面跳转到b</a>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </div>
  18. </body>
  19. <script src="js/barba.min.js" type="text/javascript"></script>
  20. <script>
  21.     Barba.Pjax.start();
  22. </script>
  23. </html>

b.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
  6.     <link href="css/a.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div id="barba-wrapper">
  10.     <div class="barba-container">
  11.         <div class="wrap1">
  12.             <div>
  13.                 <a href="a.html">页面跳转到a</a>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </div>
  18. </body>
  19. <script src="js/barba.min.js" type="text/javascript"></script>
  20. <script>
  21.     Barba.Pjax.start();
  22. </script>
  23. </html>

a.css

  1. .wrap {
  2.     margin: 50px;
  3.     width: 2500px;
  4.     height: 2500px;
  5.     background: url('../images/30.png') 100% 100%;
  6. }
  7. .wrap1 {
  8.     margin: 50px;
  9.     width: 750px;
  10.     height: 930px;
  11.     background: url('../images/36.png') repeat;
  12. }

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. (原创)用Verilog实现一个参数化的呼吸灯(Verilog，CPLD/FPGA)

    1.Abstract     观察到一个有趣的现象,每当把Apple笔记本合上的时候,那个白色的呼吸灯就会反复地由暗渐明,然后又由明渐暗,乍一看就像Apple笔记本在打盹休息一样,十分可爱!于是突发奇 ...

  2. Uber CEO博鳌论坛采访：看好中国市场共享经济的发展模式

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 【jQuery】 选择器

    [jQuery] 选择器 资料: w3school  http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...

  4. 用起来超爽的Maven——进阶篇

    以后随着使用的maven的频率增加,此文件会越来越大,也是为什么需要把默认C:\Users\Administrator\.m2 \repository目录改变为D:/OpenSources/repos ...

  5. Vue一些重要的知识点

    vue sync修饰(1)双向数据绑定,父子组件之间信息的交互 1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么 ...

  6. Ubuntu下使用Git_4

    在这个第四个文章中,我将练习GIT的高级阶段了,由于高级阶段的内容转的比较多,我自己的代码除了我自己可以看懂意外,大家可能看不懂,所以我将会按照 http://git.wiki.navisec.it/ ...

  7. 名字管理系统demo

    # 名字管理系统demo # 打印功能提示 print('欢迎使用名字管理系统v6.6.6') print('1:添加一个名字') print('2:删除一个名字') print('3:修改一个名字' ...

  8. 怎样安装PyCharm

    在地址栏输入http://www.jetbrains.com/pycharm/ 打开PyCharm官网 http://idea.lanyus.com/

  9. CSP201509-1：数组分段

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的“计算机职业资格认证”考试,针对计算机软件开发. ...

  10. Spark集群管理器介绍

    Spark可以运行在各种集群管理器上,并通过集群管理器访问集群中的其他机器.Spark主要有三种集群管理器,如果只是想让spark运行起来,可以采用spark自带的独立集群管理器,采用独立部署的模式: ...