Chrome/Firefox не отображает изображения в объектах, показанных в событии beforeunload

Я использую плагин jQuery blockUI, чтобы показать отличный «загрузчик» при каждом вызове AJAX и каждом изменении URL.

Вот полный код, отвечающий за это:

var rootPath = document.body.getAttribute("data-root");

$.blockUI.defaults.message = '<h3><img style="margin: 0 5px 5px 0" src="' + rootPath + '/images/process.gif" width="48" height="48" />In progress...</h3>';
$.blockUI.defaults.css.top = '45%';

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
$(window).on('beforeunload', function(){$.blockUI();});

Во время вызова AJAX все в порядке, однако я заметил, что Chrome и Firefox отображают анимированное изображение (данное в $.blockUI.defaults.message) во время перезагрузки страницы, то есть во время beforeunload.

Это ошибка в этих браузерах? Или это задокументированный стандарт, который ломает только IE (который без проблем отображает изображение). Кстати: Анимация .gif не является проблемой, как в Firefox, так и в Chrome не отображается даже статическая проблема .png.

Может ли это быть как-то обходным путем? Я хотел бы иметь точно такие же загрузчики как при вызовах AJAX, так и при перенаправлении страниц/изменении URL.


google-chrome firefox onbeforeunload blockui jquery-blockui
person trejder    schedule 02.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Мне кажется, что ваш корневой путь не всегда такой, каким вы его ожидаете.

Я бы предложил добавить сообщение о загрузке в dom и установить его встроенным для отображения: none.

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

Вы можете назначить расширенный элемент DOM Jquery непосредственно свойству сообщения, и $.blockUI будет использовать содержимое этой части для сообщения блока.

$.blockUI.defaults.message = $('#loadingMessage');

http://jsfiddle.net/straeger/gxzbE/2/

Надеюсь, я смог вам помочь...

person straeger    schedule 02.07.2013
comment
Нет, это проверено и проверено. Для AJAX используется тот же путь, что и для изменения URL-адреса, и мне удалось проверить с помощью Chrome Dev Tools, что этот путь правильный, и Chrome может отображать изображение - только по неизвестной мне причине он может отображать его только тогда, когда в Dev Tools щелкает на пути. Однако он не отображает его на странице. - person trejder; 03.07.2013

arrow_upward
1
arrow_downward

Мне удалось решить эту проблему, отказавшись от идеи <img> в пользу CSS и классов:

<div id="blockui-animated-content" style="display: none; padding: 15px">
    <div style="margin-right: 7px; vertical-align: middle; display: inline-block">
        <i class="icon-cog icon-spin icon-3x"></i>
    </div>
    <div style="font-size: 28px; vertical-align: middle; display: inline-block">
        Proszę czekać! Operacja w toku...
    </div>
</div>

Изменение вызова плагина blockUI на:

$.blockUI.defaults.message = $('#blockui-animated-content');
$.blockUI.defaults.css.top = '45%';

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
$(window).on('beforeunload', function(){$.blockUI();});

Теперь все работает отлично, как в AJAX, так и в изменении URL. К сожалению, это не отвечает на вопрос: "Почему Firefox и Chrome не отображают изображения из <img> тегов в событии onbeforeunload?".

person trejder    schedule 03.07.2013