Только для Firefox/IE - анимация gif останавливается после элемента show() jquery

У меня есть страница с анимацией gif в скрытом div. При нажатии чего-либо div показывает (), но анимация застревает на первом кадре. Я пробовал несколько исправлений, но ничего не работает. Я пытался динамически вставлять изображение при нажатии, перефокусировке и т. Д., Но безрезультатно.

Чтобы увидеть пример, перейдите на страницу http://staging.trulioo.com и выберите другой язык с помощью селектора языка на странице вершина. Должно появиться слово «Перевод» и анимированное изображение. Анимация работает во всех других браузерах, кроме IE и Firefox (wtf?) ...


javascript animation jquery gif
person James Huckabone    schedule 19.06.2012    source источник
comment
Что должно быть анимировано?   -  person Fresheyeball    schedule 19.06.2012
comment
@Fresheyeball, маленький круг / стрелки - проблема, похоже, в том, что Firefox просто не заинтересован в выполнении анимации на странице, которая вот-вот будет перезаписана результатами HTTP-запроса.   -  person Pointy    schedule 19.06.2012
comment
@Fresheyeball Слева от выбора языка вы увидите текст Перевод и загрузка gif   -  person FelipeAls    schedule 19.06.2012
comment
Пожалуйста, добавьте это к вашему вопросу. Его ключ.   -  person Fresheyeball    schedule 19.06.2012
comment
Возможно, вы могли бы сделать так, чтобы обработчик кликов для кнопок переключения языка открывал скрытый <div>, а затем запускал перезагрузку страницы из обработчика тайм-аута через несколько миллисекунд после клика.   -  person Pointy    schedule 19.06.2012
comment
Проблема в том, что крутящиеся стрелки рядом с Translating... не крутятся в IE или Firefox.   -  person trumank    schedule 19.06.2012
comment
Изменение языка приводит к полному обновлению страницы. Правильный?   -  person Fresheyeball    schedule 19.06.2012
comment
Не подскажете, как загружается гифка? Вы делаете show()/hide() для самого тега img? edit - nvm Я видел код, вы показываете и скрываете div. У меня была проблема, когда я показывал/скрывал тег img, и в некоторых браузерах была такая же проблема, но здесь это не так.   -  person Huangism    schedule 19.06.2012

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте сначала показать элемент при построении DOM. Возможно, используйте css, чтобы убрать его со страницы и просто вернуть туда, где он должен быть, когда вам это нужно. Или, возможно, используйте непрозрачность, чтобы скрыть его, в любом случае убедитесь, что элемент отображается при загрузке страницы.

Источник — http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer

person Huangism    schedule 19.06.2012
comment
@JamesHuckabone, можете ли вы предоставить скрипку, как вы это пробовали? упрощенный пример, я уверен, что мы сможем заставить это работать - person Huangism; 26.06.2012
comment
Та же проблема здесь. Я не думаю, что у него есть решение, это свойственно способу рендеринга изображений GIF в Firefox. Он отлично работает в других браузерах. - person SexyBeast; 16.03.2013
comment
У меня была эта проблема раньше, и она была решена без использования дополнительных js. - person Huangism; 18.03.2013

arrow_upward
1
arrow_downward

Я не мог заставить это работать, пробуя несколько решений. Мое окончательное решение состояло в том, чтобы переключиться с анимации gif на решение JavaScript в spin.js. Он отлично работает!

http://fgnass.github.com/spin.js/

person James Huckabone    schedule 25.06.2012
comment
(поздно на вечеринку) Я использовал spin.js, чтобы исправить это, пока не понял настоящую проблему. Посмотрите здесь, как продолжать использовать анимацию spinner.gif во всех браузерах. stackoverflow.com/questions/10521382/ - person Whome; 23.10.2013