您的位置：首页 > Web前端 > JavaScript

barba.js 优化页面跳转用户体验

2017-08-17 12:15 323 查看

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航