Как заставить GIF вращаться, когда дерево загружается в Javascript

Question

У меня есть дерево, которое заполняется через веб-сервис - эта часть очень быстрая, часть, которая немного медленнее, заполняет дерево ... У меня есть изображение с поворотом изображения, которое вращается во время загрузки сервиса. Так как я использую триггеры ajaxStop и ajaxStart, gif перестает вращаться после выполнения запроса ajax, и это правильно. Однако, поскольку загрузка занимает доли секунды, gif останавливается на этой доли секунды, что выглядит непрофессионально.

Как заставить gif вращаться, пока дерево не загрузится?

Answer 1

Браузеры отдают низкий приоритет обновлению изображения, поэтому во время манипулирования / вставки кода в DOM браузер этим занимается и не успевает перерисовать изображение.

Вы ничего не можете сделать, кроме оптимизации кода, чтобы обработка, выполняемая с данными ajax, была менее интенсивной, или, например, если вы получаете список из 1000 элементов, вставьте их в страница с интервалом в 50, с небольшой задержкой между ними, поэтому браузер успевает перерисовать.

YMMV, может быть, он выглядит великолепно, как в Chrome, но зависает на 5 секунд в IE.

Answer 2

Браузеры обычно не обновляют изображения во время выполнения кода JavaScript. Если вам нужно, чтобы вращатель продолжал анимацию во время заполнения DOM, ваша функция заполнения должна будет несколько раз в секунду возвращать браузеру контроль, чтобы он мог обновить изображение, обычно путем установки времени ожидания (без задержки или очень короткого времени). задержка), которая вызывает процесс заполнения, а затем возвращается.

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

IMO, вероятно, было бы лучше остановить счетчик и , а затем обновить DOM. Вы по-прежнему получите паузу, но без остановки вертушки это будет не так заметно. Чтобы дать браузеру возможность обновлять счетчик после того, как ajaxStop изменил его src, используйте нулевое время задержки с задержкой в ​​функции обратного вызова AJAX, чтобы по завершении браузер получал возможность отобразить измененный счетчик до того, как вдаваясь в длинный код населения.

Делать этот шаг населения быстрее, безусловно, стоит, если немного другая тема. (Добавление большого количества элементов DOM один за другим по своей сути медленное, так как каждая операция должна тратить больше времени на операции со списками. Присоединение большого количества элементов DOM одновременно через DocumentFragment выполняется быстро, но получение всех этих элементов DOM во фрагмент первое место может и не быть. Анализ всего innerHTML за один раз, как правило, быстрый, но генерация HTML без дыр в безопасности инъекций раздражает, сериализация и повторный анализ с помощью innerHTML+= медленнее и абсолютно ужасны. IE / HTML5 insertAdjacentHTML быстрый, но нуждается в резервной реализации для многих браузеров: идеально быстрая манипуляция Range, откат к медленным вызовам DOM от узла к узлу для браузеров без Range. Не ожидайте, что jQuery append сделает это за вас; столь же медленный, как и операции DOM от узла к узлу, потому что это именно то, что он делает.)

Answer 3

Хотя манипулирование DOM на лету действительно утомительно для многих браузеров (особенно для старых), вы можете захотеть максимально оптимизировать то, что вы там делаете.

Кроме того, еще одной хорошей идеей было бы убедиться, что вы используете jQuery 1.4, который намного быстрее выполняет такие операции.

Вы можете увидеть полезный тест (1.3 против 1.4), выполненный командой jQuery, который иллюстрирует это здесь:

http://jquery14.com/day-01/jquery-14