comment afficher une image de chargement ajax

Question

Je veux montrer l'image de chargement ajax. mais je ne sais pas comment le faire. voici mon ajax script de travail. s'il vous plaît aidez-moi pour intégrer le chargement ajax gif.merci

$(function() { 
    $( "#slider" ).slider({ 
       stop: function(event, ui) {
              $.ajax({
              url: "ajax.php",
              cache: false,
              async: false,
             data: "",
                  success: function(html){
                $("#result_list").html(html);
              }
            });

         }
    });
});

Answer 1

$(function() { 
$( "#slider" ).slider({ 
   stop: function(event, ui) {
          $("#place_of_loading_image").show();
          $.ajax({
          url: "ajax.php",
          cache: false,
          async: false,
          data: "",
          success: function(html){ //got the data

            $("#place_of_loading_image").hide(); // hide ajax loader         
            $("#result_list").html(html);        // show downloaded content
          }
        });

     }
    });
});

Où #place_of_loading_image est un conteneur (comme div ), à l'endroit où vous souhaitez que loader.gif apparaisse.

<div id="place_of_loading_image" style="display:none"><img src="load.gif"/></div>

Answer 2

Avez-vous regardé sur blockui ? http://jquery.malsup.com/block/

$(function() { 
    $( "#slider" ).slider({ 
       stop: function(event, ui) {
          $.blockUI({ message: null });  //loading
              $.ajax({
              url: "ajax.php",
              cache: false,
              async: false,
             data: "",
                  success: function(html){
                  $.unblockUI(); //loading complete
                $("#result_list").html(html);
              }
            });

         }
    });
});

Answer 3

Ajax a une api ajax start et ajax stop, quand une requête ajax est envoyée, cette apis se déclenche.

 $(document).bind("ajaxStart.mine", function() {
      $("#image").html("<img src="loading.gif"/>");
    });

$(document).bind("ajaxStop.mine", function() {
  $("#image").html("");
});

Affichez et cachez votre image à l'aide de classes.

Answer 4

Avant de lancer votre XHR, montrez l'image de chargement.

Sur le callback de succès de votre XHR, cachez l'image de chargement.

Answer 5

Quelque chose comme ça va aider.

Au début de votre fonction :

jQuery('#processing').html( '<img src="/images/ajaxBigFlower.gif">' );
$('#submit').attr("disabled", true);

Dans le cadre de la réussite de votre fonction :

jQuery('#processing').html( '' );
$('#submit').attr("disabled", false);

Nota: <div id='processing'></div> doit se trouver dans votre HTML et vous pouvez définir la position de ce DIV n'importe où sur la page à l'aide de css. Et définir id='submit' pour ces boutons de soumission que vous voulez définir comme désactivés lors du traitement...