我如何创建一个动画加载指标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定位它.