spotify - アニメーションの読み込みインジケーターSpotifyアプリを作成する方法

Question

デザインリソースフォルダーにあるloading_indicator.pngを使用して、ajaxローダーのように機能させるにはどうすればよいですか？

score 6 · Accepted Answer

これは、「ホーム」アプリケーション (What's New) から取得した、アプリの起動時に読み込みインジケーターを表示する方法です。あなたの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 で配置します。

score 0 · Accepted Answer

これは古いトピックだと思いますが、1.X APIでは、JS を介して非常に簡単にインスタンス化して非表示にできるThrobber クラスを使用することで、これを行う簡単な方法があります。

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) {

2 に答える 2