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

【问题标题】：Chrome / Firefox doesn't display images in objects shown in beforeunload eventChrome / Firefox 不在 beforeunload 事件中显示的对象中显示图像
【发布时间】：2013-06-29 18:37:11
【问题描述】：

我正在使用 jQuery blockUI 插件在每次 AJAX 调用和每次 URL 更改时显示一些漂亮的“加载器”。

这里是负责的完整代码：

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();});

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

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

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

【问题讨论】：

标签： google-chrome firefox onbeforeunload blockui jquery-blockui

【解决方案1】：

在我看来，您的根路径并不总是您期望的那样。

我建议将加载消息添加到 dom 并将其设置为内联显示：无。

现在，当您在开发者工具中切换可见性时，您可以检查您的加载图像是否正确显示。这是正确行为的先决条件。

您可以将 Jquery 增强的 DOM 元素直接分配给消息属性，$.blockUI 将使用该片段的内容作为块消息。

$.blockUI.defaults.message = $('#loadingMessage');

http://jsfiddle.net/straeger/gxzbE/2/

希望能帮到你……

【讨论】：

不，这是经过检查和验证的。 AJAX 使用与 URL 更改相同的路径，我设法使用 Chrome 开发工具进行验证，该路径是正确的，并且 Chrome 可以显示图像 - 只是，由于我不知道的原因，它只能在开发工具中单击时显示它在路上。但是，它不会在页面中显示它。

【解决方案2】：

我设法解决了这个问题，放弃了 <img> 的想法，转而使用 CSS 和类：

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

将 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 不显示来自 onbeforeunload 事件中的 <img> 标签的图像？。

【讨论】：