Jquery Ajax 이미지 로드 중

Jquery Ajax 이미지 로드 중

아래 jquery ajax 코드에 대한 로드 이미지를 구현하고 싶습니다(이는 jquery가 아직 처리 중인 경우).

$.ajax({
    type: "GET",
    url: surl,
    dataType: "jsonp",
    cache : false,
    jsonp : "onJSONPLoad",
    jsonpCallback: "newarticlescallback",
    crossDomain: "true",
    success: function(response) {
        alert("Success");
    },
    error: function (xhr, status) { 
        alert('Unknown error ' + status);
    }   
});

이 코드로 이미지 로딩을 구현하려면 어떻게 해야 합니까?감사해요.

묘사

다음을 사용하여 수행해야 합니다.jQuery.ajaxStart그리고.jQuery.ajaxStop.

1. 이미지로 div 만들기
2. 에서 표시되도록 합니다.jQuery.ajaxStart
3. 숨기다jQuery.ajaxStop

샘플

<div id="loading" style="display:none">Your Image</div>

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script>
    $(function () {
        var loading = $("#loading");
        $(document).ajaxStart(function () {
            loading.show();
        });

        $(document).ajaxStop(function () {
            loading.hide();
        });

        $("#startAjaxRequest").click(function () {
            $.ajax({
                url: "http://www.google.com",
                // ... 
            });
        });
    });
</script>

<button id="startAjaxRequest">Start</button>

상세 정보

• jQuery.ajaxStart()
• jQuery.ajaxStop()

다음과 같은 방법을 사용해 보십시오.

<div id="LoadingImage" style="display: none">
  <img src="" />
</div>

<script>
  function ajaxCall(){
    $("#LoadingImage").show();
      $.ajax({ 
        type: "GET", 
        url: surl, 
        dataType: "jsonp", 
        cache : false, 
        jsonp : "onJSONPLoad", 
        jsonpCallback: "newarticlescallback", 
        crossDomain: "true", 
        success: function(response) { 
          $("#LoadingImage").hide();
          alert("Success"); 
        }, 
        error: function (xhr, status) {  
          $("#LoadingImage").hide();
          alert('Unknown error ' + status); 
        }    
      });  
    }
</script>

조금 늦은 감이 있지만 특별히 div를 쓰고 싶지 않으시면 저는 보통 이렇게 하는데...

var ajax_image = "<img src='/images/Loading.gif' alt='Loading...' />";
$('#ReplaceDiv').html(ajax_image);

ReplaceDiv는 Ajax도 삽입하는 div입니다.그래서 도착하면 이미지가 교체됩니다.

주의: ajax Start / ajax Stop이 ajax jsonp 요청에 대해 작동하지 않습니다(ajax json 요청은 OK).

이 글을 쓰면서 jquery 1.7.2를 사용하고 있습니다.

다음은 제가 찾은 레퍼런스 중 하나입니다.http://bugs.jquery.com/ticket/8338

언급URL : https://stackoverflow.com/questions/8761713/jquery-ajax-loading-image