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 roo         


        

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