javascript - 是否有任何类似于`onload`的Ember事件

Question

我想在我的 Ember 应用程序中加载所有内容（例如图像）后执行 JavaScript。

我已经尝试过使用didInsertElement()和didRender()钩子，但看起来他们不等待背景图像加载。

这是我的组件的代码片段的样子：

export default Ember.Component.extend({
    didInsertElement() {
      this._super(...arguments);
      Ember.run.scheduleOnce('afterRender', this, function() {
        var home =$('#main-outlet')[0];
        home.className += " homePage";
        startTimer(5);
      });
    },
});

有什么解决方案或替代方法吗？

Answer 1

Ember 没有等效于 的事件onload。

但是，关于另一种方法，您可以利用 Ember 的 jQuery 别名，结合didInsertElement组件中的钩子来实现您正在寻找的执行顺序。尝试这个：

export default Ember.Component.extend({
  didInsertElement() {
    Ember.$(window).on('load', this.executeCssAnimations);
  },

  executeCssAnimations() {
    // your CSS and animation logic would go here
    Ember.$('.big-background')
         .text('NOW READY FOR CSS and ANIMATION UPDATES.')
         .css('color', 'yellow');
  },

  willDestroyElement(...args) {
    this._super(...args);
    Ember.$(window).off('load', 'window', this.executeCssAnimations);
  },
});

该willDestroyElement钩子也被包括在内，以显示load从window.

我创建了一个Ember Twiddle 示例来为您演示这一点。