google-chrome - trucos - inspeccionar elemento teclado

Chrome/Firefox no muestra imágenes en los objetos que se muestran en el evento beforeunload

Question

Estoy usando el complemento jQuery blockUI para mostrar un "cargador" ingenioso en cada llamada AJAX y cada cambio de URL.

Aquí está el código completo responsable de eso:

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();});

Todo está bien durante la llamada AJAX, sin embargo, he notado que Chrome y Firefox muestran una imagen animada (dada en $.blockUI.defaults.message ), durante la recarga de la página, es decir, durante la beforeunload .

¿Es esto un error en estos navegadores? O es un estándar documentado, que solo IE se rompe (que muestra la imagen sin ningún problema). Por cierto: .Gif animado no es un problema, tanto Firefox como Chrome no pueden mostrar ni siquiera el problema .png estático.

¿Puede esto ser de alguna manera una solución? Me gustaría tener exactamente los mismos cargadores tanto en llamadas AJAX como en redireccionamientos de páginas / cambios de URL.

Answer 1

Me parece que tu rata raíz no siempre es lo que esperas que sea.

Sugiero agregar el mensaje de carga al dom y configurarlo para mostrar: ninguno.

Ahora, cuando cambia la visibilidad en las herramientas de desarrollador, puede inspeccionar que la imagen de carga se muestre correctamente. Este es un requisito previo para el comportamiento correcto.

Puede asignar un elemento DOM mejorado de Jquery directamente a la propiedad del mensaje y $ .blockUI usará el contenido de esa pieza para el mensaje de bloqueo.

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

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

Espero que te pueda ayudar...

Answer 2

Logré resolver este problema, descartando la idea <img> a favor de CSS y clases:

<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>

Cambiando la llamada del complemento blockUI a:

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

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

Ahora, todo funciona bien, tanto en AJAX como en el cambio de URL. Desafortunadamente, esto no responde a la pregunta: " ¿Por qué Firefox y Chrome no muestran imágenes de las etiquetas <img> en onbeforeunload event? ".