javascript - 排除预加载的元素

Question

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

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

例如我希望我的 #header 和 #banner 元素立即可见，并让pace在页面的其余部分完成其工作。

对我来说，“开始”事件没有被触发？

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

根据文档:

“收集器是收集进度信息的代码段。Pace 包括四个默认收集器:

Ajax

监控页面上的所有ajax请求

元素

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

文档

检查文档就绪状态

事件滞后

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

它们都可以通过同名的配置选项进行配置或禁用。”

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

也许

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

可以做到这一点。

更多信息请参见:

“元素

渲染到屏幕上的元素是我们确定页面已渲染的一种方式。如果您想使用该信息源(根本不需要)，请指定一个或多个选择器。您可以用逗号分隔选择器以正确处理错误状态，其中进度条应该消失，但我们正在查找的元素可能永远不会出现:“

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

这似乎是一个不错的插件!

<小时/>

编辑

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

“如果您使用 AMD 或 Browserify，您可以传递选项来启动:”

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