Question

我在预加载整个页面的当前项目上使用http://github.hubspot.com/pace/。

是否可以从预加载中排除某些元素？

E.g。我希望我的#header和#banner元素能够立即显示，并让页面的其余部分完成其工作。

对我来说，＆＃34;开始＆＃34;事件没有被触发？

Pace.on("start", function() {
        alert('heee');
    });

准备好文件，也不出功能。 Pace.on("done", …触发就好了。

更新：目前我的主要问题是......

$(window).load(function(){
    $('body').addClass("page");

    Pace.on('start', function() { 
        alert('start') // not fired
    });

    Pace.on('done', function() {
        alert('done') // fired!
    });
});

Answer 1

根据文件：

＆＃34;收集器是收集进度信息的代码。 Pace包括四个默认收集器：

<强> 的Ajax

监控页面上的所有ajax请求

<强> 元素

检查页面上特定元素是否存在

<强> 文档

检查文档readyState

事件延迟

检查javascript正在执行的事件循环滞后信号

可以通过相同名称的配置选项配置或禁用它们。＆＃34;

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

也许

elements: {
   selectors: ['.my-page']
}

可以做到这一点。

更多信息：

<强> ＆＃34;元素

呈现给屏幕的元素是我们决定页面已呈现的一种方式。如果您想使用该信息源（根本不需要），请指定一个或多个选择器。你可以用逗号分隔选择器来处理错误状态，其中进度条应该消失，但我们正在寻找的元素可能永远不会出现：＆＃34;

paceOptions = {
  elements: {
    selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
  }
}

这似乎是一个很好的插件！

修改

要在启动时附加代码，似乎应该是：

＆＃34;如果你正在使用AMD或Browserify，你可以通过选项开始：＆＃34;

define(['pace'], function(pace){ pace.start({ document: false }); });

从预加载中排除元素

1 个答案: