Отображение, а затем скрытие анимированных GIF-файлов индикатора / счетчика - это хороший способ показать пользователю, что его действие сработало и что что-то происходит, пока он ожидает завершения своего действия, например, если действие требует загрузки некоторых данных с сервера (ов). ) через AJAX.

Моя проблема в том, если причина замедленияпроцессор-интенсивная функция, гиф замораживается.

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

Пример JSBIN

Примечание: кнопка «Это медленно» на некоторое время свяжет процессор - для меня около 10 секунд будет зависеть от характеристик ПК. Вы можете изменить, насколько это возможно, с помощью атрибута «data-reps» в HTML.

Expectation: При нажатии запускается анимация. Когда процесс завершится, текст изменится (обычно мы тоже скрываем индикатор, но пример будет более понятным, если мы оставим его вращающимся).Фактический результат: Анимация запускается, затем останавливается до завершения процесса. Это создает впечатление, что что-то сломано (пока оно неожиданно не завершится).

Есть ли способ указать, что запущен процесс, который не зависает, если JS поддерживает занятость процессора? Если нет возможности что-то оживить, я прибегну к отображению, а затем скрываю статическое текстовое сообщение с надписьюLoading... или что-то подобное, но что-то анимированное выглядит гораздо активнее.

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

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

Пример JSBIN.Одно простое исправление, которое я нашел здесь (использовалось в другом примере выше), - это обернуть все после отображения индикатора вsetTimeout( function(){ ... },50); с очень коротким интервалом, чтобы сделать его асинхронным. Это работает (см. Первый пример выше), но это не очень чисто - я уверен, что есть лучший подход.

Я уверен, что должен быть какой-то стандартный подход к индикаторам для загрузки процессора, о котором я не знаю - или, возможно, это нормально, просто использоватьLoading... текст сsetTimeout? Мои поиски ничего не дали. Я прочитал 6 или 7 вопросов о проблемах с похожим звучанием, но все они оказались не связанными.

редактировать Несколько замечательных предложений в комментариях, вот еще несколько особенностей моего точного вопроса:

Сложный процесс включает в себя обработку больших файлов данных JSON (например, операции манипулирования данными JS в памятипосле загрузка файлов) и рендеринг визуализаций SVG (через Raphael.js), включая сложную подробную карту масштабируемого мира, основанную на результатах обработки данных из JSON. Таким образом, некоторые из них требуют манипулирования DOM, некоторые нет.Мне, к сожалению, нужно поддерживать IE8НО при необходимости я могу дать пользователям IE8 / IE9 минимальный запасной вариант, какLoading... текст и дать всем что-то современное.