火狐浏览器不能查看影像_Chrome / Firefox不会在beforeunload事件中显示的对象中显示图像...

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

In progress...

';

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

解决方案

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

Proszę czekać! Operacja w toku...

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 tags in onbeforeunload event?".