Aggiungere un preload ai contenuti con jquery

[m4tt86]

Ciao ragazzi,
volevo un aiuto da voi, in pratica ho fatto una funzione in jquery che esegue delle operazioni in una pagina php e restituisce il risultato in un div chiamato "cat". Funziona tutto, solo che per restituire il valore ci mette un po di tempo, quindi avevo pensato di aggiungere un preloading e alla comparsa del div deve scomparire l'immagine di preoading. Come devo fare?

<script type="text/javascript">
    function add(){
        $.ajax({
            type: "POST",
            url: "http://localhost/home.php?task=addajaxcat&lang=it",
            success: function(html){
            
            $(".cat").fadeOut('slow', function() {
                $(".cat").html(html).fadeIn('slow');
            });
            
                        }
        });
        
        }
</script>

 

[customlife]

Ciao m4tt86,
inserisci l'immagine che hai scelto come preloading nel punto in cui vuoi che compaia e la nascondi con css. Poi quando chiami la funzione la visualizzi con .show(); e al completamento della richiesta ajax la ri-nascondi con .hide();

<script type="text/javascript">

function add(){

$.ajax({
type: "POST",

url: "http://localhost/home.php?task=addajaxcat&lang=it",
beforeSend: function(){

//l'immagine deve essere nel DOM ma nascosta con css
$("#your_image").show();​

},
success: function(html){

$("#your_image").hide();

$(".cat").fadeOut('slow', function() {
$(".cat").html(html).fadeIn('slow');
});​

}​

});​

}​

</script>