load image prima del contenuto

[-AA-]

ciao
vorrei caricare una pagina dove ci sia prima del contenuto una GIF tipo loading.... e poi il contenuto...non è un problema di caricare dati pesanti, in realtà è + un motivo estetico.

[----]
Ho 4 links che caricano, utilizzando JQUERY 4 "pezzi" di html esterno, per cui senza reload della pagina.
[----]

    <script type="text/javascript">
        $(document).ready(function() {
            $(".payment a").click(function() {
                $("#ctopayment").load($(this).attr('href'));
                return false;
            });
        });
    </script>

mi piacerebbe che prima del contenuto venga mostrata una GIF tipo LOADING (che poi è un FAKE visto che è solo testo quel che devo caricare).
---------------------------

spero di essermi spiegato bene

---------------------------

[Vindav]

Se non ho capito male dovrebbe bastare questo:

<script type="text/javascript">
        $(document).ready(function() {
            $(".payment a").click(function() {
                $("#ctopayment").html("[img]mygif[/img]");
                $("#ctopayment").load($(this).attr('href'));
                return false;
            });
        });
</script>

prima che il testo venga caricato dalla funzione load mostri l'immagine.

[-AA-]

ciao Vindav e grazie per la risposta
si è proprio quello, solo che tra l'immagine e il contenuto mi piacerebbe metterci un tempo perchè il contenuto è testo e carica "troppo velocemente" come dicevo + che pratico è 1 effetto estetico

come posso temporizzare il cambio per cui?

[-AA-]

Ho modificato così

$("#ctopayment").html('<div class="myloading">[img]./images/layout/loading.gif[/img]</div>').delay(20000).load($(this).attr('href'));

ma pare che jquery non contenga il metodo delay

[-AA-]

niente ho utilizzato questo metodo:

$("#ctopayment").fadeOut(0);
$("#ctopayment").fadeIn(800);

mi da cmq 1 effetto carino