2012-01-22 3 views
1

아약스 호출이 완료되면 로딩 화면을 표시하고 아약스 호출이 완료되면 로딩 화면을 숨기려고합니다. 코드를 작성했지만 모질라에서만 작동합니다. 모든 브라우저에서 작동하도록하고 싶습니다. 내 HTML 코드는jquery ajax 호출 로딩 화면이 나타나지 않습니다.

<div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;"> 
    <div id="loadScr" style="filter: alpha(opacity = 65); z-index: 9999;border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"></div> 
    <div id="loader" style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; "> 
    <img src="IMG/ajax-loader.gif" alt="loading" /> 
    </div> 
</div> 

같은 -과 JQuery와는 IS-

$.ajax({ 
    cache: false, 
    beforeSend: function() { 
    $('#loadScreen').show(); 
    }, 
    type: "POST", 
    async: false, 
    url: serviceUrl, 
    data: jsonData, 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    complete:function(){ 
    $('#loadScreen').hide(); 
    }, 
    success: function (result) { 
    ProcessAjaxResponse(result); 
    }, 
    error: function (errorMsg) { 
    //TODO:Lets see 
    } 
}); 
+0

showLoadingScreen 기능은 어떻게 생겼습니까? loadScreen 및 컨테이너에 대한 z- 인덱스 소품은 무엇입니까? –

+0

showLoadingScreen과 같은 메소드가 없습니다. 내가하고있는 것은 $ ('# loadScreen')이다. show(); 와 $ ('# loadScreen'). 숨기기(); 모든 css 속성은 html 자체에 적용됩니다. – user1027112

+0

IE7-9, Chrome 및 FF에서 제공 한 코드를 테스트했습니다. 그것은 세 가지 모두에서 작동합니다. 보다 포괄적 인 테스트 페이지가 있습니까? –

답변

1

가 아약스 호출하기 전에 화면을 표시하고 '쇼'콜백에서 아약스 전화를 걸 코딩. 이렇게하면 ajax 호출이 수행되기 바로 전에 화면이 업데이트됩니다.

$('#loadScreen').show(function() { 
    $.ajax({ 
     cache: false, 
     beforeSend: function() { 
      //now happens above 
     }, 
     type: "POST", 
     async: false, 
     url: serviceUrl, 
     data: jsonData, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     complete: function() { 
      $('#loadScreen').hide(); 
     }, 
     success: function(result) { 
      ProcessAjaxResponse(result); 
     }, 
     error: function(errorMsg) { 
      //TODO:Lets see 
     } 
    }); 
}); 
관련 문제