Браузер: продолжить анимацию после нажатия клавиши escape - PullRequest
Новая
       21

Браузер: продолжить анимацию после нажатия клавиши escape

7 голосов
/ 26 мая 2010

Firefox (и другие браузеры, на мой взгляд) останавливают анимацию gif, когда вы нажимаете кнопку Стоп или вызываете ее с помощью клавиши Escape.

У меня есть текстовый ввод, который при изменении делает ajax-запросы на обновление других элементов. В рамках этой ajaxyness у меня есть анимированный GIF, чтобы показать обратную связь.
Я также задерживаю нажатие клавиши escape на этом входе, чтобы очистить текстовое поле для лучшего UX.

Моя проблема в том, что после однократного нажатия клавиши Escape ни один из ajax gif больше не анимируется, пока страница не обновится. Кто-нибудь знает обходной путь?

Материал, который я пробовал:

Я попробовал e.stopPropagation(); и e.cancelBubble = true; в функции, обрабатывающей e.keyCode == 27, и это, похоже, не сработало. Я подозреваю, что это перестает вызывать больше js-событий, и браузер перехватывает выход независимо от активности js.

У меня есть gif, показывающий / скрывающий путем добавления / удаления класса css, поэтому трудно применить обходной путь «изменить URL-адрес gif для сброса». Я даже не знаю, работает ли это так или иначе - не проверял это. Но это кажется сложным. Если кто-то знает, что это работает, и знает, как легко применить хак с помощью background-image: url(../images/ajax-loader_dotcirclel13x13.gif); css, пожалуйста, дайте мне знать.

Ответы [ 5 ]

9 голосов
/ 24 августа 2010

К сожалению, вы не можете игнорировать тот факт, что браузер останавливает анимированный GIF при нажатии клавиши ESC. Я бы предположил, что это так, что у пользователя всегда есть возможность перестать раздражать анимированные GIF, если они становятся слишком подавляющими (я не говорю, что ваш загружающий GIF раздражает;)). Эта страница описывает, как их можно отключить все вместе в FF.

Я бы порекомендовал использовать JavaScript для создания простой анимации. Вы могли бы даже сделать это, используя спрайт со всеми кадрами из анимации gif и просто перемещая положение фона для каждого кадра.

4 голосов
/ 13 февраля 2012 
$(document).keydown(function(event){
    if (event.keyCode == 27) {
        //FIXES FIREFOX GIF STOPPING
        event.preventDefault();
    }
});
0 голосов
/ 22 июня 2013

была такая же проблема. преобразовал мой анимированный GIF в CSS и это решило проблему. этот сайт позволяет создавать расширенные анимации CSS http://cssload.net/ надеюсь, что это поможет!

0 голосов
/ 26 мая 2010

Хорошо, вторая идея: поместите loading GIF в отдельный HTML-документ и покажите его в маленьком IFRAME без границ.

У меня есть нет понятия, будет ли это работать, хотя. Скорее всего, команда «Отмена» распространяется и на все дочерние IFRAME, поэтому вполне может быть нет.

0 голосов
/ 26 мая 2010

Хм. Вы рассматривали возможность использования небольшой Flash-анимации «пожалуйста, подождите»?

Серьезно. Как показывает краткий тест, Flash игнорирует клавишу Esc .

Возможно даже импортировать анимированный GIF-файл во флэш-фильм. Я не знаю.

Вы можете использовать JavaScript для создания запасного варианта без флэш-памяти (вместо этого отображается оригинальный анимированный GIF).

...