从预加载中排除元素 [英] Exclude elements from being preloaded

问题描述

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

I use http://github.hubspot.com/pace/ on a current project which preloads the entire page.

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

Is it possible to exclude certain elements from preloading?

例如我希望我的#header和#banner元素立即可见，并让它在页面的其余部分继续工作.

E.g. I want my #header and #banner element to be visible right away, and let pace do its job for the rest of the page.

对我来说，开始"事件没有触发吗?

For me the "start" event is not triggered?

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

在文件就绪状态中也没有退出该功能. Pace.on("done", …触发就很好.

Wheter in the document-ready nor out of the function. Pace.on("done", … triggers just fine.

更新:我目前的主要问题是……

Update: my major problem at the moment is this …

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

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

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

推荐答案

根据文档:

收集器是收集进度信息的代码位.Pace包括四个默认收集器:

Ajax

Ajax

监视页面上的所有ajax请求

元素

Elements

检查页面上特定元素的存在

文档

Document

检查文档readyState

事件滞后

Event Lag

检查事件循环滞后信号，表明正在执行javascript

可以分别通过相同名称的配置选项来配置或禁用它们."

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

也许

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

可以解决问题.

更多信息在这里:

元素

"Elements

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

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

似乎是一个不错的插件！

It seems a good plugin!

编辑

要在启动时附加代码，看来应该是:

To attach code on start it seems that should be:

如果您使用的是AMD或Browserify，则可以将选项传递给开始:"

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

这篇关于从预加载中排除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！