如何创建动画加载指示器 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调用时显示加载器，将其隐藏在completed-callback中，使用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) {