我如何创建一个动画加载指标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，有一种更简单的方法可以通过using the Throbber class来实现这一点，它允许您通过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) {