Chrome / Firefox不会在beforeunload事件中显示的对象中显示图像

问题描述

我使用jQuery blockUI插件在每个AJAX调用中显示一些漂亮的加载器，并更改每个URL。

以下是完整的代码： / p>

  var rootPath = document.body.getAttribute（data-root）; 
 
 $ .blockUI.defaults.message ='< h3>< img style =margin：0 5px 5px 0src ='+ rootPath +'/images/process.gifwidth =48height =48/>进行中...< / h3>'; 
 $ .blockUI.defaults.css.top = '45％'; 
 
 $（document）.ajaxStart（$。blockUI）.ajaxStop（$。unblockUI）; 
 $（window）.on（'beforeunload'，function（）{$。blockUI（）;}）; 
  

在AJAX调用期间一切正常，但是，我注意到Chrome和Firefox确实显示动画图像（在 $。blockUI.defaults.message 中给出），在页面重新载入期间，也就是在 beforeunload p>

这是这些浏览器中的错误吗？或者它是一个文件化的标准，只有IE中断（显示图像没有任何问题）。 BTW：动画 .gif 不是问题，Firefox和Chrome都无法显示静态 .png 问题。 / p>

这可以以某种方式解决吗？我想在AJAX调用和页面重定向/ URL更改方面具有完全相同的加载器。

解决方案

我设法解决这个问题问题，将< img> 主意放在CSS和类别上：

 < div id =blockui-animated-contentstyle =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ć！经营者... to 
< / div> 
< / div> 
  

更改blockUI插件调用：

  $。blockUI.defaults.message = $（'＃blockui-animated-content'）; 
 $ .blockUI.defaults.css.top = '45％'; 
 
 $（document）.ajaxStart（$。blockUI）.ajaxStop（$。unblockUI）; 
 $（window）.on（'beforeunload'，function（）{$。blockUI（）;}）; 
  

现在，所有的工作都很好，无论是在AJAX和URL的变化。不幸的是，这并没有回答这个问题：为什么Firefox和Chrome浏览器不能显示< img> 标签在 onbeforeunload 事件？。

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.

解决方案

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

这篇关于Chrome / Firefox不会在beforeunload事件中显示的对象中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！