jQuery + Ajax + Loading Spinner 이미지 = 너무 빠름!

Question

ASP.NET MVC 2 페이지에서 jQuery를 사용하고 있습니다. 그것은 보답으로 날짜를 얻는 최고 간단한 게시물입니다. 프로세스 자체는 매우 빠르게 실행됩니다. 사용자가 어떤 일이 일어나는지 보여주기 위해 회 전자 이미지를 사용하고 싶습니다. Firefox에서 모두 정상적으로 작동하며 로컬에서 테스트합니다. 그러나 IE 8에서는 스피너 이미지가 충분히 오래 표시되지 않습니다. 그냥 깜박 거린다. 프로세스가 작동 중이거나 완료되었다는 표시가 나타나지 않으면 최종 사용자에게 혼동을 줄 수 있습니다. 이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

감사합니다.

<img id="signedout<%: item.Id %>" src="/Content/Images/signed_out.png" alt="Signed Out" title="Signed Out" style="display:none" /> 
       <div id="ajaxloader<%: item.Id %>" style="display:none;text-align:center"><img src="/Content/Images/ajax-loader.gif" alt="loading..." title="loading..." /></div> 

       <script type="text/javascript"> 
        $(function() { 
         var id = "<%: item.Id %>"; 

         $("#signout" + id).click(function() { 
          if (confirm("Are you sure you want to sign this visitor out?")) { 

           $(this).hide(); 
           //$("#signout" + id).hide(); 
           $("#ajaxloader" + id).show(); 

           var url = '<%: Url.Action("signout") %>'; 

           $.ajax({ 
            type: "POST", 
            url: url, 
            data: "id=" + id, 
            success: function (result) { 
             $("#timeout" + id).append(result); 
             $("#ajaxloader" + id).hide(); 
             $("#signedout" + id).show(); 
             $("#row" + id).css("background", "#E8E8E8"); 
            }, 
            error: function() { 
             alert("There was an unexpected error. Please try again later."); 
             $("#ajaxloader" + id).hide(); 
             $("#signout" + id).show(); 
            } 
           }); 
          } 
         }); 
        }); 
       </script> 

Answer 1

당신은 JS에서 타임 아웃을 설정할 수 및 그 제한 시간이 만료 된 후 회가 될 때까지 숨길 수없는 것을 보장 할 것 :

$.ajax({type: "POST", 
      url: url, 
      data: "id=" + id, 
      success: function (result) { 
       $("#timeout" + id).append(result); 
       setTimeout(HideLoadingSpinner, 2000); 
       $("#signedout" + id).show(); 
       $("#row" + id).css("background", "#E8E8E8"); 
      }, 
      error: function() { 
       alert("There was an unexpected error. Please try again later."); 
       setTimeout(HideLoadingSpinner, 2000); 
       $("#signout" + id).show(); 
      } 
    }); 

:

function HideLoadingSpinner() { 
     $("#ajaxloader" + id).hide(); 
    } 

그런 다음이 한 개 아약스 전화를 교체

타이머로 인해 이상한 동작이 발생하는 경우 성공 콜백의 다른 논리를 HidingLoadingSpinner 함수로 옮길 수도 있습니다.

Answer 2

다시로드 한 후 몇 초 후에 밝은 배경에 "데이터로드 됨"메시지가 흐리게 표시되지 않을 수 있습니까?

Answer 3

아무 것도 실제로 처리되지 않을 때 스피너를 오도하지 않게 표시하는 대신 프로세스가 완료되었다는 다른 표시를하는 것이 좋습니다. 그러나 당신은 이것에 착수 한 것처럼 보입니다.

이것은 amurra의 대답을 기반으로하며, 이미 시간 제한이 반환 된 경우에만 프로세스가로드되면 회 전자를 숨기도록 설계되었습니다. 따라서 AJAX 요청이 "너무 빠름"을 반환하면 시간 초과를 기다립니다.

var timeoutComplete=false; 
var requestComplete=false; 

function HideLoadingSpinner() { 
    if(requestComplete) { 
     $("#ajaxloader" + id).hide(); 
    } else { 
     timeoutComplete=true; 
    } 
} 

한편, 클릭 핸들러 내부에 ...

setTimeout(HideLoadingSpinner, 2000); 

$.ajax({type: "POST", 
    url: url, 
    data: "id=" + id, 
    success: function (result) { 
     $("#timeout" + id).append(result); 
     $("#signedout" + id).show(); 
     $("#row" + id).css("background", "#E8E8E8"); 
     if(timeoutComplete) { 
     $("#ajaxloader" + id).hide(); 
     } else { 
     requestComplete=true; 
     } 
    }, 
    error: function() { 
     alert("There was an unexpected error. Please try again later."); 
     $("#ajaxloader" + id).hide(); 
     $("#signout" + id).show(); 
    } 
}); 

편집 : 어쨌든 전에 alert이있을 것이기 때문에 난 그냥의 error 기능에서 if(timeoutComplete) 물건을 제거했습니다.

Answer 4

본 적이 있습니다. 실제로보고있는 것은 IE가 요청을 실행하는 데 정상적인 시간이 걸리고 FF가 넘는 시간이 걸리므로입니다. network.dns.ipv4OnlyDomains에서 localhost까지를 about:config으로 설정하면 로컬 호스트에서 FF 속도가 크게 빨라집니다. Source.

내 자신의 응용 프로그램에서 @ ImOrtality의 제안을 따르고 Ajax 요청이 완료되었음을 알리는 알림을받습니다. 여러 번 나는 회 전자를 보지 못합니다. JBar의 custom implementation을 사용하여 매우 전문적인 내 알림을 받았습니다.

가

는 지금까지 AJAX 호출시 스피너를 보여, 당신은 모든 JQuery와 AJAX시 스피너를 보여주기 위해 마스터 페이지에서이 포함 것은 호출

다음

$(function() { 
    $('.spinner') 
    .hide() 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 
}); 

당신이 보여와 숨어 포함 할 필요가 없습니다 회 전자 승/$.ajax 모든 전화.