javascript - $(document).ready(function() 与 Meteor JS 模板

Question

我有一个与 Meteor 深度集成的模板。它使用一个 script.js 文件，该文件在 $(document).ready 和 $(window).load 之后运行一堆命令。

我将 script.js 放在 client/compatibility 中，并且仅当我对模板进行硬刷新时它才有效。否则，模板不会呈现，函数也不会执行。

具体来说，这段代码:

    // 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
};