0

我正在使用 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 中断（显示图像没有任何问题）。顺便说一句：动画.gif不是问题，Firefox 和 Chrome 都无法显示静态.png问题。

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

4

2 回答 2

1

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

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

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

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

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

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

我希望我能帮助你...

于 2013-07-02T12:40:08.757 回答
1

我设法解决了这个问题，放弃了<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？ ”。

于 2013-07-03T13:27:28.813 回答