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控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...
随机推荐
- POJ1236_A - Network of Schools _强连通分量::Tarjan算法
Time Limit: 1000MS Memory Limit: 10000K Description A number of schools are connected to a compute ...
- MVC5使用单选按钮与下拉框【转】
某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了.测试代码如下: 1.model类Blog.cs(类型使用枚举类型,自动生成的视图会以下拉列表形式显示): using S ...
- linux redhat 打开防火墙中的某个端口
服务器成功监听了一个端口(如 5500),但是外面连接不进来,telnet其端口不通,解决办法如下(在root用户下): $ /sbin/iptables -I INPUT -p tcp --dpor ...
- 实用脚本 2 -- Linux下定时执行脚本
今天学习Linux下定时执行脚本,看到一篇讲解比较好的文章,特此拿来分享. 原文链接:http://www.blogjava.net/decode360/archive/2009/09/18/2877 ...
- CSS里一个奇怪的属性
事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...
- SVN 使用时的小错误
在使用SVN的时候总是出现一些小问题,今天又出现了一个,诶,分享一下吧! Error:(个人文件夹名http://www.qdjhu.com/anli_xq/f_wancheng.php) is ...
- 算法搬运之BFPRT算法
原文连接:http://noalgo.info/466.html BFPRT算法,又称为中位数的中位数算法,由5位大牛(Blum . Floyd . Pratt . Rivest . Tarjan)提 ...
- Selenium八大元素定位方式
1.根据id来定位: import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.sele ...
- jmeter☞文件目录（一）
Jmeter的文件目录如下图: 1.bin:可执行文件目录 a.jmeter.bat:Windows环境下的启动文件 b.jmeter.log:日志文件 c.jmeter.sh:Linux环境下的启动 ...
- LeetCode 707 ——设计链表
1. 题目 2. 解答 用一个单链表来实现,只有一个头指针.因为不能建立哨兵结点,因此要特别注意是否在头结点处操作. class MyLinkedList { public: struct ListN ...