アニメーション化されたローディングインジケータを作成する方法アプリケーションを確認する

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。次に、アプリケーションのロードが完了したら、要素を削除します。あなたはdomify.jsのspotifyのdomメソッドでそれを行うことができます。あなたのapp.js内：

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

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

dom.jsが公式APIに含まれるかどうかわかりません。そうしないと、他の方法（標準DOMメソッドは、使用している他のJSライブラリ、など）それを削除することができます：上記の例では、必ずしもloading_indicator.pngを使用していないことが、使用されているものは何でも画像

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

注意を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の先頭にスロバークラスが含まれていることを確認してください：

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