spotify - 我如何创建动画加载指示器 Spotify 应用程序

Question

我如何使用设计资源文件夹中提供的 loading_indicator.png 使其像 ajax 加载器一样工作？

Answer 1

这就是我在启动我的应用程序时显示加载指示器的方式，取自“主页”应用程序（新增功能）。在您的 index.html 中：

<div class="loading">
  <div class="throbber"><div></div></div>
</div>

在你的 app.css 中：

@import url("sp://import/css/eve.css");

adam.css 是黑暗的 Spotify 主题，eve.css 是光明的。然后，当您的应用程序完成加载时，只需删除该元素。您可以使用 spotify dom.js 中的 dom 方法来完成。在您的 app.js 中：

var dom = sp.require('sp://import/scripts/dom');

var loadingEl = dom.queryOne('.loading');
dom.destroy(loadingEl);

我不知道 dom.js 是否会在官方 API 中。否则，您可以通过任何其他方式将其删除（标准 dom 方法、您正在使用的其他 js 库等）：

var loadingEl = document.querySelector('.loading');
loadingEl.parentNode.removeChild(loadingEl);

请注意，上面的示例不一定使用 loading_indicator.png，而是使用 adam.css 和 eve.css 主题使用的任何图像。

如果你不想在你的应用程序中使用加载器作为正常的 ajax 加载指示器，那么 Web 应用程序的所有正常规则都适用。启动ajax调用时显示加载器，隐藏在完成回调中，用css定位。

Answer 2

我意识到这是一个老话题，但是使用 1.X API 有一种更简单的方法来做到这一点，即使用 Throbber 类，它允许您通过 JS 相当简单地实例化和隐藏。

var tracks = document.getElementById('tracks');
var throbber = Throbber.forElement(tracks);
// (wait for tracks to load and render)
throbber.hide();

只需确保在 JS 的开头包含 Throbber 类：

require([
  '$views/throbber#Throbber'
], function (Throbber) {