仅在首页使用pace.js (初始站点加载)

Question

使用插件pace.js (http://github.hubspot.com/pace/)，我只希望使用它预加载站点的第一页。一直在研究这些选项，但似乎并没有一个内置的方法来实现这一点，而只是切换了推状态和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内部，您就可以隐藏CSS的速度。

body.loaded .pace {
  display: none;
}

当然，如果您只想展示一次，那么使用这种速度是没有意义的，但是使用这种技术，您可以很容易地为初始VS提供不同的样式和/或动画。二次加载