显示模态加载div未在谷歌浏览器和IE浏览器中运行，Firefox也可以
我想在进程SOAP调用期间显示“请等待，加载”旋转圈。 我在Google Chrome和Internet Explorer 9,10,11中显示模态屏幕时遇到问题。 Firefox还可以。
如果我删除$("body").removeClass("loading"); 来自someMethodSOAP() ，加载屏幕在Google Chrome和IE中显示正确。
SOAP调用的持续时间是一秒，因此应该显示加载屏幕。
我想在Google Chrome和IE中显示加载屏幕，但我不知道该怎么做？ 为什么Firefox浏览器工作正常，谷歌Chrome和IE不行？
我用：
[jQuery 2.1.1] [ http://code.jquery.com/jquery-2.1.1.js ]
[jquery.soap 1.3.8] [ http://plugins.jquery.com/soap/ ]
[模态窗口解决方案来自：[ 如何使用jQuery创建“Please Wait，Loading …”动画？ ]
谢谢。
我的代码：
index.php ：
.modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; } /* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ body.loading { overflow: hidden; } /* Anytime the body has the loading class, our modal element will be visible */ body.loading .modal { display: block; } div.modal div { position: absolute; top:50%; left:50%; width: 20%; height: 10%; margin:-5% 0 0 -10%; text-align: center; } var WEB_SERVICE_URL = 'path to SOAP'; function someMethodSOAP(id) { var xml; $.soap({ url: WEB_SERVICE_URL, method: "testMethod", appendMethodToURL:false, async: false, data: { ID: id, }, beforeSend: function (SOAPEnvelope) { $("body").addClass("loading"); //loading turn on }, success: function (soapResponse) { //OK xml = soapResponse.toString(); }, error: function (SOAPResponse) { //FAULT: xml = SOAPResponse.toString(); } }); $("body").removeClass("loading"); //loading turn off return xml; } $(window).load(function() { /*$("body").addClass("loading"); $("body").removeClass("loading");*/ someMetodSOAP(1); }); 
编辑：
我尝试这个代码（下面），但仍然无法正常工作。
行为：方法test_loading服务器上的CALL方法，在5秒内完成。 此代码等待（async：false）5秒，并在web浏览器显示加载后。 我不明白。 加载显示在someMetodSOAP(5); 已完成，但我想在someMetodSOAP(5);之前显示加载someMetodSOAP(5); 。
$(window).load(function() { $("body").addClass("loading"); someMetodSOAP(5); //$("body").removeClass("loading"); }); var WEB_SERVICE_URL = '../soap_nu.php'; function someMetodSOAP(second) { var xml; $.soap({ url: WEB_SERVICE_URL, method: "test_loading", appendMethodToURL:false, async: false, data: { parametr: second }, beforeSend: function (SOAPEnvelope) { }, success: function (soapResponse) { xml = soapResponse.toString(); }, error: function (SOAPResponse) { xml = SOAPResponse.toString(); } }); return xml; }
解决：我发现deffered-object来自：api.jquery.com/category/deferred-object/（我没有这个链接的声誉，抱歉。）。 它帮助我。 我希望能帮到你：
.block {display: block !important} #loading { display: none; /*etc. for example css spinner*/ } var WEB_SERVICE_URL = 'path to SOAP'; function someMethodSOAP(id){ var d = $.Deferred(); $.soap({ url: WEB_SERVICE_URL, method: "testMethod", appendMethodToURL:false, async: true, data: { ID: id, }, success: function (soapResponse) { //SOAP OK try { d.resolve(soapResponse.toString()); } catch(e){ d.reject(SOAP_THROW); } }, error: function (soapResponse) { //SOAP FAULT: try { d.reject(soapResponse.toString()); } catch(e){ d.reject(SOAP_THROW); } } }); return d.promise(); } $(window).load(function() { //create some promises var promises = new Array(); promises.push(someMethodSOAP(1)); //only one promise $("#loading").addClass("block"); //start loading $.when.apply($, promises).done(function(xml){ //Resolve $("#loading").removeClass("block"); //finish loading /*PASS*/ }).fail(function(xml){ //Reject $("#loading").removeClass("block"); //finish loading /*FAIL*/ }); });
你需要删除async: false ，然后它将正常工作。
只有在完成调用后才需要删除loading类。 一旦呼叫完成并收到响应，它就会执行成功/失败function。 试试这个。
$.soap({ url: WEB_SERVICE_URL, method: "testMethod", appendMethodToURL:false, async: false, data: { ID: id, }, beforeSend: function (SOAPEnvelope) { $("body").addClass("loading"); //loading turn on }, success: function (soapResponse) { //OK xml = soapResponse.toString(); $("body").removeClass("loading"); }, error: function (SOAPResponse) { //FAULT: xml = SOAPResponse.toString(); $("body").removeClass("loading"); } });