仅在第一页使用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创建不同的样式和/或动画。辅助加载