Question

在Ember 2.5中实现加载屏幕的最佳方法是什么？我想要实现的是：show splash screen - ＆gt;在后台加载数据 - ＆gt;当DOM准备就绪时，隐藏启动画面。

我尝试了几个选项，但是当文档准备就绪时我无法隐藏启动画面。我正在加载一个大表，因此完成DOM需要一些时间，因此模型准备就不是正确的钩子。

Answer 1

我是通过将自定义HTML（简单加载div）添加到app / index.html：

来实现的

<body>
  <div class="loading-overlay" id="initialLoading"></div>

  {{content-for "body"}}

  <script src="assets/vendor.js"></script>
  <script src="assets/event.js"></script>

  {{content-for "body-footer"}}
</body>

然后我将以下内容添加到我的app / application / route.js：

actions: {
  loading(transition/* , originRoute*/) {
    let controller = this.get('controller');
    if(controller) {
      controller.set('currentlyLoading', true);
    }
    transition.promise.finally(function() {
      $("#initialLoading").remove();
      if(controller) {
        controller.set('currentlyLoading', false);
      }
    });
  }
}

在我的app / application / template.hbs中，我还必须添加加载div：

{{#if currentlyLoading}}
  <div class="loading-overlay"></div>
{{/if}}

那会发生什么？

已加载index.html并且尚未解析javascript：您的加载屏幕可见。
已加载index.html并且您的javascript已被解析。 ember.js调用加载操作并将currentLoading设置为true：显示两个加载屏幕。
转换完成，第一次加载和第二次加载屏幕被删除
对于现在发生的每个转换，都会显示加载屏幕。要删除此行为，请删除第二个加载屏幕逻辑。

我希望它有所帮助。

Ember JS实现启动画面/加载启动画面

1 个答案: