仅在第一页上使用pace.js（初始站点加载）

Question

使用插件pace.js（http://github.hubspot.com/pace/），我希望只使用它来预加载网站的第一页。一直在查看选项，但似乎没有内置的方法来做到这一点，但只切换pushstate和ajax预加载。

此外，出于某种原因，预加载条在预加载页面时结束其宽度的约50％。这可能与本地运行的站点有关，尽管我使用多个外部元素和图像。有其他人经历过这个吗？

Answer 1

这是我的方式。你可以介绍一下你是如何实现的。

<script> $(window).load(function(e){ $('div.loading-page').fadeOut('slow'); }); </script>
<div class="loading-page"></div>

的CSS：

.loading-page{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:white;
    z-index:1999; /* as pace has 2000 */
}

Answer 2

如果由于某种原因你想用pace.js做这个，你可以利用类，只需在页面完全加载后向body元素添加一个类。

$(window).load(function() {
    setTimeout(function() {
        $('body').addClass('loaded');
    }, 1000);
});

然后你可以隐藏CSS，如果它在body.loaded

里面

body.loaded .pace {
  display: none;
}

当然，如果你只想展示一次，那么使用它的速度并没有多大意义，但是使用这种技术你可以轻松地为初始VS设置不同的样式和/或动画。二次装载