Chrome/Firefox不會在beforeunload事件中顯示的對象中顯示圖像

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瀏覽器打破了（顯示圖像沒有任何問題）。順便說一句：動畫.gif不是一個問題，Firefox和Chrome都無法顯示即使是靜態的.png問題。

這可以以某種方式解決方法嗎？我希望在AJAX調用和頁面重定向/ URL更改時具有完全相同的加載器。

Answer 1

我設法解決這個問題，有利於CSS和類的丟棄<img>想法：

<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>標記的圖像？」。

Answer 2

對我來說就像你一樣rootpath並不總是你認爲它是。

我會建議將加載消息添加到dom並將其設置爲內聯以顯示：無。

現在，當您在開發人員工具中切換可見性時，您可以檢查加載的圖像是否正確顯示。這是正確行爲的先決條件。

您可以將一個Jquery增強的DOM元素直接分配給消息屬性，$ .blockUI將使用該塊的內容作爲塊消息。

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

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

我希望我可以幫你......