Значок спина замерзает при загрузке записей

Ответ 1

Это происходит потому, что Gif требует, чтобы поток был открыт для отображения следующего изображения. Если вы используете чистый подход css, вы не увидите эту проблему. Возьмите шрифт - удивительный, например -

<i class="icon-spin icon-spinner"></i>

Поскольку это чистый подход CSS, счетчик будет продолжать вращаться, даже если поток загружается, загружая все ваши новые записи и связывая их связанные объекты.

Если вам нужно продолжить прядение, я бы включил этот бит CSS из источника Font-Awesome -

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(359deg); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(359deg); } }

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }

  100% {
    -o-transform: rotate(359deg); } }

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg); }

  100% {
    -ms-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(359deg); } }

.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear; }

И используя статический значок, изображение или спрайт и просто применяя к нему класс "icon-spin", независимо от того, является ли это значком или нет.

Edit

Добавьте это везде, где вы объявляете свой CSS -

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Измените это -

<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <img src="/images/spin.gif" />
</div>

для этого -

<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <i class="fa fa-spinner fa-spin"></i>
</div>

Причина fa вместо icon заключается в том, что текущая версия FontAwesome изменена для использования fa вместо значка из-за столкновений

Последнее изменение

Ваша проблема в том, что ваша логика неисправна. Я попытался объяснить это в комментариях, но я дам последнее обновление ТОЧНО, как должна выглядеть ваша логика, если вы хотите показать свой счетчик и заставить его вращаться.

isSpinning(true)
context.getData(name, records).then(function (data) {
    isLoading(false);

    setTimeout(function () {
        isSpinning(false);
    }, 1000);

})
.fail("Record not found");


<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <!-- THERE IS NO REASON TO USE A VISIBLE BINDING HERE AND ON THE PARENT -->
    <i class="fa fa-2x fa-spinner fa-spin"></i>
</div>

Причина, по которой это не работает, - в вашей логике. Скопируйте это ТОЧНО в свое решение, и оно будет работать.

Ответ 2

Вы также можете Base64 закодировать графику и применить эту графику загрузки через CSS, тем самым ускоряя последующее использование и сохраняя HTTP-запросы. Результатом выполнения анимированного загрузчика с кодировкой Base64 является то, что для небольших общих многоразовых активов, таких как загрузка или обработка активов, он уже доступен и будет продолжать анимацию при выполнении многочисленных запросов AJAX/HTTP, что и пытается решить здесь.

См. также:

• Встраивает ли данные фонового изображения в CSS в качестве хорошей или плохой практики Base64?

• http://css-tricks.com/data-uris/

Таким образом, вы можете загрузить графику при загрузке CSS. Поскольку при кодировании изображений Base64 в не совсем подходящем для вас решении можно использовать технологию SASS/Compass и использовать путь к активу, а затем, когда вы предварительно обрабатываете или компилируете css, он использует путь к ресурсу или ресурсу и кодирует это для кодированной версии Base64 для вас. Этот метод будет работать со всеми форматами изображений и т.д.

Sass/Compass Base64 Ссылки:

• http://www.alwaystwisted.com/post.php?s=2013-11-23-sass-and-base64-images
• http://compass-style.org/reference/compass/helpers/inline-data/

"Вставляет содержимое изображения непосредственно внутри вашей таблицы стилей, устраняя необходимость в другом HTTP-запросе. Для небольших изображений это может быть выгодным для производительности за счет увеличения сгенерированного CSS Файл"

Но будьте осторожны! Base64-кодировка не без каких-либо оговорок

• трудно поддерживать и обновлять: без какого-либо инструмента, который может помочь, вручную редактирование и компоновка спрайтов изображений - довольно сложная задача

• Увеличенное потребление памяти (возможно, очень драматичное): это часто упускать из виду. Время доставки изображений уменьшается на расходы на большую память и площадь процессора, особенно для больших спрайты и спрайты с большим количеством пробелов.

• bleedthrough: для спрайтов, у которых нет большого пробела для разделения изображения, theres увеличенный шанс близких изображений видимо кровотечение через другие элементы, так как в этом случае, когда кровотечение было только на iOS (но отлично смотрелся на Chrome и Safari на рабочем столе). Примечание

Пример Base64 Loading Spinner:

.genericLoader { background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');   
}

Рабочий пример:

• http://jsbin.com/muyacodu/1/edit?html,css,output

Когда Base64 кодирует изображения (и когда их нет)  - http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

Инструменты кодирования

• http://webcodertools.com/imagetobase64converter
• http://www.base64encode.org/
• http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Другие ссылки StackOverflow:

• Встраивает ли данные фонового изображения в CSS в качестве хорошей или плохой практики Base64?
• закодированный анимированный gif-код в формате css

Ответ 3

Это только предположение, но я думаю, что ваша запись загрузки script блокирует веб-браузер, запустив в основном потоке. Это нежелательное поведение, но, к счастью, это именно то, для чего были созданы webworkers. Сначала я рекомендую вам прочитать эту страницу, чтобы получить небольшой фон, а затем прочитать.

В основном вам нужно сначала перенести свой код загрузки в отдельный файл javascript. Этот отдельный файл должен содержать весь код для загрузки записи, затем поместить его в объект и вернуть объект обратно в основной поток, как показано ниже. Затем вы можете вызвать этот код из основного потока, используя:

var myWorker = new Worker("my_loading_code.js");

Теперь содержимое, доступное веб-работнику для прямого доступа, ограничено из-за проблем с безопасностью потоков, поэтому вам может потребоваться извлечь записи, а затем отправить их в основной поток, используя вызов postMessage(x);, который позволяет вам отправить любой объект обратно на главную страницу. Затем главная страница может реагировать на это сообщение, установив обработчик сообщений с помощью:

myWorker.onmessage = function(record){
    // This is only pseudo code, use your actual code here
    reactToRecievingRecord(record);
}; 

Это означает, что основной поток не блокируется, пока все записи загружаются и могут анимировать ваш значок, только кратковременно блокируя при получении записи.

Если это недостаточно ясно или вам нужна дополнительная помощь, просто спросите:)

EDIT:

Чтобы вдаваться в подробности, в вашем случае внутри отдельного файла вам понадобится какой-то код, который что-то делает по строкам:

context.getData(name, records).then(function (data) {
    postMessage(data);
})

то в основном файле вы хотите:

isSpinning(true);
var myWorker = new Worker("my_loading_code.js");
myWorker.onmessage = function(record){
    // This is only pseudo code, use your actual code here
    isLoading(false);
    isSpinning(false);
}; 

Обратите внимание: этот код на самом деле ничего не делает с данными после его получения, вам нужно будет обработать это, но я уверен, что вы получите приблизительную идею. Обратите внимание, что это также только фрагменты, вам нужно будет превратить их в полные функции и т.д.