barba.js 优化页面跳转用户体验
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 优化页面跳转用户体验的更多相关文章
- JS实现页面跳转 浏览器地址栏保持不变
JS实现页面跳转 浏览器地址栏保持不变 在公司内部框架中,发现点击超链接,页面发生跳转,而浏览器地址栏URL始终保持不变.分析其实现机制,响应A标签onclick事件,通过Ajax向服务器端发送htt ...
- js 控制页面跳转的5种方法
js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- js实现页面跳转的两种方式
CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...
- [HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文)
要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...
- js实现页面跳转
js方式的页面跳转1.window.location.href方式 <script language="javascript" type="text/java ...
- 5阻止A默认行为和JS实现页面跳转的方法
<!--HTML中阻止A标签的默认行为: href="javascript:;" href="javascript:void 0;"--><! ...
- 关于JS的页面跳转
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- js控制页面跳转,清缓存，强制刷新页面
单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...
随机推荐
- 20145202马超《网络对抗》Exp4 恶意代码分析
20145202马超<网络对抗>Exp4 恶意代码分析 1.实验后回答问题 (1)总结一下监控一个系统通常需要监控什么.用什么来监控. 虽然这次试验的软件很好用,我承认,但是他拖慢了电脑的 ...
- hive报错：Caused by: ERROR XBM0H: Directory /var/lib/hive/metastore/metastore_db cannot be created.
在cdh集群中,删除之前的hive服务,然后将hive添加到其他节点,然后再通过hive客户端连接hive报错: Caused by: ERROR XJ041: Failed to create da ...
- 让Dreamweaver支持cshtml (MVC Razor环境)
介绍:让Dreamweaver支持cshtml 正文: 如题,刚才搜了很久,都搜不到答案,幸好得到“包大人”(同事)的帮助,才得以解决. DW支持很多文件类型的代码提示,可是类型太多,不可能全部都有, ...
- 如何从“点子”落地到“执行”？—完整解析1个手游传播类mini项目的进化
本文来自网易云社区 作者:林玮园 从点子到落地,是不确定到确定的过程,是从模糊概念到具体现实的实现过程.无论什么点子,在落地变现的过程中都会有很多疑问产生. 首先,不确定点子本身是否成立.点子的背后是 ...
- 『AngularJS』ngValue
原文 描述 绑定给定的表达式到input[select]或input[radio]的值,以便当这个元素被选中的时候,设置这个元素的ngModel到绑定的值.当需要使用ng-repeat来动态生成rad ...
- Wireshark lua dissector 对TCP消息包合并分析
应用程序发送的数据报都是流式的,IP不保证同一个一个应用数据包会被抓包后在同一个IP数据包中,因此对于使用自制dissector的时候需要考虑这种情况. Lua Dissector相关资料可以见:ht ...
- 【个人训练】（POJ1837）Balance
这几天抓住国庆的黄金时间(因为没有女朋友,天天刷题emmmm 其实还在肝少前还要捞秋刀鱼) ,重点攻克掉几个基本的地方:搜索.dp.图论.这几天的题目应该就是这些范围. 题意 原题的意思大概是这样的, ...
- 【紫书】（UVa1347）Tour
继续考虑dp题目. 题意分析 其实这里只是更加仔细的做一个lrj的复读机(Orz 他分析了一个很重要的结果:如果是一个人从左到右再回来,并且每个点恰经过一次,那么等价于两个人从左到右每个点经过一次地遍 ...
- redux使用过程中遇到的两个致命的关键点
一.在reducer中,返回的state必须是全新的对象,否则,redux不会执行listening方法,因为redux会认为state没有更新过,没必要重新渲染view. 出现问题的例子: cons ...
- kinit
su tf$ kinit -k -t /tmp/tf.keytab tf/admin@SINO.COM