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

posted on 2017-08-17 12:15 Newbie_小白阅读(927) 评论(0) 编辑收藏举报