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?".