$(document).ready(带有Meteor JS模板的function())

Question

我有一个模板,我已经与Meteor深度整合.它使用一个scripts.js文件,它在$(document).ready和$(window).load之后运行一堆命令.

我将scripts.js放在客户端/兼容性中,只有在我对模板进行硬刷新时才有效.否则,模板不会呈现,并且函数不会执行.

具体来说,这段代码:

    // Append .background-image-holder <img>'s as CSS backgrounds

$('.background-image-holder').each(function() {
    var imgSrc = $(this).children('img').attr('src');
    $(this).css('background', 'url("' + imgSrc + '")');
    $(this).children('img').hide();
    $(this).css('background-position', 'initial');
});

非常感谢,如果你知道我应该从这里采取它.

Answer 1

如果你想在加载DOM 和所有图像时启动一个函数,请使用:(预先警告,这是在ES6中)

let imgCount;
let imgTally = 0;

Template.myTemplate.onRendered(function () {
  this.autorun(() => {
    if (this.subscriptionsReady()) {
      Tracker.afterFlush(() => {
        imgCount = this.$('img').length;
      });
    }
  });
});

Template.myTemplate.events({
  'load img': function (event, template) {
    if (++imgTally >= imgCount) {
      (template.view.template.imagesLoaded.bind(template))();
    }
  }
});

然后你只需要声明imagesLoaded在完成所有图像时会触发哪个.

Template.myTemplate.imagesLoaded = function () {
  // do something
};