Jquery Ajax Chargement de l'image

Question

Je voudrais implémenter une image de chargement pour mon code ajqu jquery (c'est lorsque la jquery est toujours en cours de traitement) ci-dessous est mon code:

 $.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);
    }   
});
 

Comment puis-je implémenter une image de chargement dans ce code. Merci

Answer 1

La description

Vous devez le faire en utilisant jQuery.ajaxStart et jQuery.ajaxStop .

1. Créez une div avec votre image
2. Rendre visible en jQuery.ajaxStart
3. Cachez-le dans jQuery.ajaxStop

Échantillon

 <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>
 

Plus d'information

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

Answer 2

Essayez quelque chose comme ceci:

 <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>
 

Answer 3

C'est un peu tard mais si vous ne voulez pas utiliser de div spécifiquement, je le fais généralement comme ça ...

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

ReplaceDiv est le div que l'Ajax insère aussi. Donc quand elle arrive, l'image est remplacée.

Answer 4

Veuillez noter que: ajaxStart / ajaxStop ne fonctionne pas pour la demande ajax jsonp (la demande ajax json est correcte)

J'utilise jquery 1.7.2 en écrivant ceci.

voici l'une des références que j'ai trouvées: http://bugs.jquery.com/ticket/8338