2015-04-28 5 views
1

На веб-странице клиентов страница использует js/css, чтобы создать представление в стиле дерева для желаемого внешнего вида клиента. Но на некоторых страницах со множеством объектов требуется время загрузки стилей. Поэтому я предложил добавить экран загрузки.Загрузка gif не анимируется?

Вот пример вопроса: http://zamozuan.com/content/16-search-auto-parts-by-vehicle-chevrolet

Мой клиент купил маленький анимированный значок им нравится, что соответствует теме их сайта красиво.

У меня есть очень простое дополнение к скрипту, чтобы добавить значок загрузки, а затем в $ (document) .ready, скрывая элемент загрузки и отображающий основной элемент.

Все работает отлично, за исключением загрузки gif, не оживляя, пока ПОСЛЕ полной загрузки страницы.

Кажется, что цикл для js слишком интенсивный, поэтому gif не оживляет.

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

Мне интересно, есть ли какие-либо проблемы, чтобы исправить это? Возможно ли предварительно загрузить gif в анимированный статус и каким-то образом помешать JS вмешаться? Или есть способ сделать цикл js не настолько интенсивным, что полностью замораживает браузер?

Что касается кода, это точно, как по ссылке выше, только с этим добавил в конце:

$('#loading').hide(); 
$('.mainsearch').first().css('display', 'block'); 

Загрузочный элемент просто содержит:

<img src="img/loading.gif" class="img-responsive"> 
<p class="centertext">Loading, please wait...</p> 

Но, как уже упоминалось, gif не загружается, просто зависает.

Для JavaScript, что укладка дерева, вы можете увидеть его здесь:

http://zamozuan.com/js/tree.js

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

Спасибо.

+0

Можете ли вы воссоздать это где-нибудь, что люди действительно могут увидеть проблему? Ваш живой сайт не содержит этого загружаемого изображения. – CodingWithSpike

+0

Проблема с этим сайтом, который я связал, является живым сайтом, и поскольку он основан на движке электронной торговли, он имеет странный способ включения css/js. Как только я получу некоторое свободное время немного позже, я попытаюсь установить его. –

ответ

1

Нет, нет обходного пути. Это не проблема с загрузкой изображения, она просто не будет анимирована во время работы скрипта.

Javascript single threaded. Пока сценарий запущен, в браузере нет визуальных обновлений. Это включает в себя анимацию GIF, в то время как сценарий работает, анимация не будет перемещаться.

0

Не имея возможности работать с реальным кодом и попробовать его, я бы предложил попытаться разбить ваш цикл на отдельные обратные вызовы. Возможно, используя setTimeout или requestAnimationFrame на каждые несколько рекурсий, чтобы дать браузеру возможность обновить/нарисовать.

Смежные вопросы