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控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...
随机推荐
- (数据科学学习手札23)决策树分类原理详解&Python与R实现
作为机器学习中可解释性非常好的一种算法,决策树(Decision Tree)是在已知各种情况发生概率的基础上,通过构成决策树来求取净现值的期望值大于等于零的概率,评价项目风险,判断其可行性的决策分析方 ...
- 汇编实验15:安装新的int 9中断例程
汇编实验15:安装新的int 9中断例程 任务 安装一个新的int 9中断例程,功能:在DOS下,按下“A”键后,除非不在松开,一旦松开后,就显示满屏幕的“A”,其他键照常处理. 预备知识概要 这次实 ...
- python语法图
- 如何在Centos7下升级Apache至最新版本
Apache是使用最广泛的应用部署软件.并且它也是所有服务器的必要组成部分.安装最新版本的apache意味着拥有更多最新的功能和修复了已知的BUG. 介绍 在这篇教程里面,我将会介绍在Centos7下 ...
- This content database has a schema version which is not supported in this farm.
I want to move the website to another server. The new server has reinstall Sharepoint2013 serv ...
- Java日志(二):log4j与XML配置文件
[Java日志(一):log4j与.properties配置文件]一文列举的几个案例以.properties文件作为log4j的配置文件,本文简单看一下log4j与XML配置文件 (1)XML配置文件 ...
- jmeter上传视频图片附件
http上传附件一般用的Content-Type: multipart/form-data;文中是先通过fiddler抓取手机端的请求,然后通过jmeter模拟该请求,如果有接口文档,则可以跳过抓包这 ...
- js中DOM 节点的一些操作方法
什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...
- 为Zabbix配置RabbitMQ监控模板
RabbitMQ的配置参考 https://github.com/jasonmcintosh/rabbitmq-zabbix 简而言之,具体分为几个步骤: 1. 将脚本文件(scripts文件夹)和配 ...
- Sersync实时备份服务部署实践