Question

我正在使用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在页面重新加载期间，即$.blockUI.defaults.message期间确实显示了动画图像（在beforeunload中给出）。

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

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

Answer 1

对我而言，就像你的rootpath并不总是你所怀疑的那样。

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

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

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

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

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

我希望我能帮到你......

Answer 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不会在<img>事件中显示来自onbeforeunload标签的图片？”。

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

2 个答案: