Jquery / Javascript не активирует изображение GIF (только Firefox)

Question

Первое, что нужно упомянуть, это то, что мой код работает в IE8 и Google Chrome. Проблема только в Firefox, я тестировал ее в Ubuntu и Win XP с FF.

Я пытаюсь отобразить gif-изображение ajaxloader во время обновления страницы. В самом начале я использую функцию jquery .ready (), чтобы скрыть обновление div #, отображающее изображение. Когда мы нажимаем на ссылку обновления, я показываю div # refreshing. Моя проблема в том, что ajaxloader.gif не поворачивается как это должно быть, это становится, чтобы исправить изображение. Но, как уже упоминалось, он работает под Chrome и IE.

Есть идеи, почему?

HTML:

<div id="refreshing">Refreshing</div>
<a href="javascript: refreshPage();">Refresh</a>

CSS:

#refreshing {
    font: 14px Verdana,Arial;
    color: #00264b;
    background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat;
}

JavaScript:

$(document).ready(
    function() {
        // hide the ajax loader
        $("#refreshing").hide();
    }
);

function refreshPage() {
    $("input").attr("disabled", "disabled");
    $("select").attr("disabled", "disabled");
    $("img").attr("onclick", "");
    $("a").attr("href", "#");
    window.location.href = window.location.href;
    $("#refreshing").toggle();
}

Еще одна вещь заключается в том, что для конфигурации firefox image.animation_mode установлено значение normal. Плюс, если я посмотрю под firebug, изображение будет анимированным.

спасибо всем.

Answer 1

Причина, по которой это не работает, заключается в том, что Firefox останавливает все анимации gif при обновлении страницы.

Чтобы сделать это, вам следует загрузить страницу (или, что еще лучше, только обновленные части) через ajaxи перезаписать существующий контент новым.

Answer 2

Другое решение - использовать элемент холста html5 для анимированных загрузчиков.Он все равно должен нормально работать при перезагрузке страницы.

Этот генератор работает довольно хорошо и совместим с различными браузерами http://heartcode.robertpataki.com/canvasloader/

Answer 3

Мне наконец-то удалось заставить его работать с кофе добрым утром в среду.
Вот код, когда Firefox останавливал работу GIF-изображения, и я использовал его для отображения
пользователь, который обновлял страницу, хотя я мог обновлять страницу неправильно.

Поэтому я ищу другой способ обновления страницы в Javascript, где используется window.location.reload ();
Я попробовал это сделать, но была только одна проблема с этим методом, мой ввод, который я деактивировал при обновлении, все еще был отключен при обновлении.

Я занимался их повторной активацией в $ (документ) .ready (function () {// активировать ввод});
В конце все работало нормально, но я все же нашел реактивацию странной.
Наконец-то я ищу разницу между window.location.href = window.location.href и window.location.reload ()

Понял здесь -> Разница между window.location.href = window.location.href и window.location.reload ()

Таким образом, передав аргумент true в функцию reload, мы сообщаем функции reload, что не следует публиковать старые данные POST и получать свежую копию страницы с сервера.
Это решило полностью мою проблему.

Я не изменил ни HTML-код, ни CSS-код

<!-- JS -->
$(document).ready(
    function() {
        // hide the ajax loader
        $("#refreshing").hide();
    }
);
function refreshPage() {
    $("input").attr("disabled", "disabled");
    $("select").attr("disabled", "disabled");
    $("img").attr("onclick", "");
    $("a").attr("href", "#");
    window.location.reload(true);
    $("#refreshing").show();
}

Спасибо всем.