Как мне создать анимированный индикатор загрузки приложений - PullRequest
Новая
       4

Как мне создать анимированный индикатор загрузки приложений

1 голос
/ 25 декабря 2011

Как мне использовать файл loading_indicator.png, предоставленный в папке ресурсов дизайна, чтобы он работал как загрузчик ajax?

Ответы [ 2 ]

6 голосов
/ 26 декабря 2011

Вот так я отображаю индикатор загрузки при запуске моего приложения, взятый из «домашнего» приложения (что нового).В вашем 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 - свет.Затем, когда ваше приложение будет загружено, просто удалите элемент.Вы можете сделать это с помощью методов dom в spotify dom.js.В вашем 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 внутри своего приложения, тогда применяются все обычные правила веб-приложений.Показывать загрузчик при инициализации вызова ajax, скрывать его в завершенном обратном вызове, позиционировать его с помощью css.

0 голосов
/ 12 марта 2014

Я понимаю, что это старая тема, но с API 1.X есть более простой способ сделать это с помощью с использованием класса Throbber , который позволяет создавать и скрывать достаточно просто с помощью JS.

var tracks = document.getElementById('tracks');
var throbber = Throbber.forElement(tracks);
// (wait for tracks to load and render)
throbber.hide();

Просто включите класс Throbber в начале вашего JS: 

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