Chrome / Firefox doesn't display images in objects shown in beforeunload event

Question

I'm using jQuery blockUI plugin to show some nifty "loader" on each AJAX call and each URL change.

Here is full code responsible for that:

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

Everything is fine during AJAX call, however, I've noticed that Chrome and Firefox does display animated image (given in $.blockUI.defaults.message), during page reload, that is, during beforeunload.

Is this a bug in these browsers? Or is it a documented standard, that only IE breaks (which displays image without any problems). BTW: Animated .gif is not a problem, both Firefox and Chrome fails to display even static .png problem.

Can this be somehow workaround? I would like to have exactly the same loaders both at AJAX calls and page redirects / URL changes.

Answer 1

I managed to solve this problem, dropping the <img> idea in favor of CSS and classes:

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

Changing blockUI plugin call to:

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

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

Now, all works just fine, both in AJAX and URL change. Unfortunately, this doesn't answer the question: "Why Firefox and Chrome doesn't display images from <img> tags in onbeforeunload event?".

Answer 2

Seems to me like yout rootpath is not allways what you excpect it to be.

I would suggest adding the loading message to the dom and set it inline to display : none.

Now when you toggle the visibility in the developer tools you can inspect that that your loading image is displayed correctly. This is a prerequisite for the correct behavior.

You can assign a Jquery enhanced DOM Element directly to the message property and $.blockUI will use the content of that piece for the block message.

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

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

I hope I could help you...