Chrome / Firefox不会在beforeunload事件中显示的对象中显示图像 [英] Chrome / Firefox doesn't display images in objects shown in beforeunload event

查看:458
本文介绍了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事件中显示的对象中显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆