2

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

此外，由于某种原因，预加载器栏在预加载页面时会在其宽度的 50% 处结束。这可能与在本地运行的站点有关，尽管我使用了多个外部元素和图像。还有其他人遇到这种情况吗？

4

2 回答 2

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 */
}
于 2013-12-19T18:36:36.810 回答
0

如果出于某种原因您想使用pace.js 执行此操作，您可以利用类并在页面完全加载后向body 元素添加一个类。

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

然后你可以用 CSS 隐藏速度，如果它在里面body.loaded

body.loaded .pace {
  display: none;
}

当然，如果您只想显示一次，则为此使用速度并没有什么意义，但是使用这种技术，您可以轻松地为初始 VS 设置不同的样式和/或动画。二次加载

于 2014-12-09T01:24:44.623 回答