mostra il caricamento prima di mostrare il risultato di invio in jquery

Question

Ho un semplice codice jquery per inviare un contenuto in una finestra modale jQuery con ajax! tutto funziona senza problemi. in condizioni normali, dopo aver fatto clic sul pulsante di invio, dopo 1-2 secondi, questo codice che mostra il risultato,

function AddFastqpro(action) { 
    var b = {}; 
    b[dle_p_send] = function() { 
     var response = $('#dle-poke').val() 
     $.post(dle_root + 'engine/ajax/fast.php', { text: response, action: action }, 
     function (data) { 
      if (data == 'ok') { 
       DLEalert(dle_p_send_ok, dle_info); 
      } 
      else { DLEalert(data, dle_info); } 
     }); 
    }; 

    $('body').append("<div id='dlepopup' style='display:none'><textarea id='dle-poke'></textarea></div>"); 

    $('#dlepopup').dialog({ 
     autoOpen: true, 
     modal: true, 
     draggable: false, 
     width: 350, 
     dialogClass: "modalfixed", 
     buttons: b 
    }); 
}; 

La mia domanda è, come posso aggiungere e mostrare una foto di carico dopo aver cliccato su invio e prima di mostrare il risultato ?

Answer 1

si può fare questo da ajaxStart() e ajaxComplete()

$("#loading").ajaxStart(function(){ 
    $(this).show(); 
}); 

$("#loading").ajaxComplete(function(){ 
    $(this).hide(); 
}); 

o

$.ajax({ 
    url : dle_root + 'engine/ajax/fast.php', 
    data: { text: response, action: action }, 
    beforeSend: function(){ 
    $("#loading").show(); 
    }, 
    complete: function(){ 
    $("#loading").hide(); 
    }, 
    success: function (data) { 
     if (data == 'ok') { 
      DLEalert(dle_p_send_ok, dle_info); 
     } 
     else { DLEalert(data, dle_info); } 
    }); 
}); 

Answer 2

è possibile utilizzare $.ajax() al posto di $.post(), e aggiungere una funzione

Answer 3

$('#button').click(function(){ 
    $('#loading-div').html('<img src="..." />'); 
    $.ajax({ 
     type: 'POST', 
     url: '...', 
     data: {...}, 
     success: function(response) { 
      $('#loading-div').html(''); 
     } 
    }); 
}); 

Nel caso in cui beforeSend hai un pulsante con id="button", e alcuni <div id="loading-div"></div> in cui è possibile visualizzare le immagini delle

http://api.jquery.com/jQuery.ajax/