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

最新推荐文章于 2025-04-14 13:59:43 发布

bangxionger9224

最新推荐文章于 2025-04-14 13:59:43 发布

阅读量703

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/theWayToAce/p/7380918.html

版权

本文介绍barba.js库的使用，通过在a页面显示b页面内容，实现页面跳转无刷新效果，提升用户体验。文章包含具体实现代码示例，展示了如何减少HTTP请求并利用预取和缓存加速导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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