Question

我们无法获得某种形式的视觉指示，即我们的Ember App中正在加载“页面”。

尝试了gif方法和Spin JS。两者都失败，因为它们非常滞后并且只有在所有Ember对象都已加载时才完全加载。 A similar problem to this question

其他人在面向公众的构建中使用了哪些方法？

修改：这是应用首次加载的时间。初始负载足够长，需要某种形式的视觉指示。

Answer 1

您可以使用加载指示器为文档添加叠加层。当您通过CSS添加它时，它会在初始化Ember之前加载。初始化ember后，您可以删除叠加层。

下面是一个如何实现它的示例：

HTML：

<html>
  <head> ... load dependencies ... </head>
  <body class="loading"> ... handlebars templates ... </body>
</html>

CSS：

body.loading:after {
  content: '';
  background: rgba(255,255,255,.3) url(images/loader.gif) 50% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

Ember代码：

App.ApplicationView = Ember.View.extend({
    removeLoader: function() {
        $('body').removeClass('loading');
    }.on('didInsertElement')
});

这种方式在Ember初始化之前显示一个加载指示器，但是当Ember完成时，初始化加载器被移除。

Answer 2

您可以使用jQuery ajax callbacks：

$(document).ajaxStart(function(){ console.log("ajax started")})
$(document).ajaxStop(function(){ console.log("ajax stopped")})

这适用于所有ajax请求。

加载Ember.js对象时的数据加载指示器？

2 个答案: