[jQuery] Immagine di loading prima di caricare i tabs

[maforast]

SAlve, da un pò sto cercando nel web e nel forum esempi di come mostrare un'immagine di loading prima che una parte di pagina venga totalemente caricata. Ci sono dei metodi che ritnego troppo pesanti per fare questo come ad esempio quello di caricare un div apposito che contenga l'immagine di loading e poi sostituirlo con quello reale.

Ultimanente guardando il jquery carosel, ho visto che fanno questa cosa tramite css in maniera molto efficace. Solo non ho capito come adattare la stessa cosa per quanto riguarda i tabs jquery. Ovvero quelli che ti permettono di switchare da un contenuto all'altro tramite schede nella stessa pagina. In fase di loading, infatti, questi vengono visualizzati come una lista puntata di elementi e solo quando sono tutti caricati, vengono mostrati in maniera corretta. Ecco in questa fase vorrei che sia presente l'immagine di loading. Ho visto anche che su jquery c'è la funzione load che chiama la pagina interessata ma non riesco a farla funzionare e poi perchè richiamare la stessa pagina?.

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

qualcuno sa un modo semplice per fare questo? ad esempio carosel fa cosi

#mycarousel.jcarousel-skin-tango{ 
background:url(../images/loading.gif) center center no-repeat; 
 width:  100%;
    height: 75px;
  } 
#mycarousel.jcarousel-skin-tango li{ 
  display:none; 
  }

Grazie

[cavicchiandrea]

Ci sono dei metodi che ritnego troppo pesanti per fare questo come ad esempio quello di caricare un div apposito che contenga l'immagine di loading e poi sostituirlo con quello reale.

Su che basi ritieni che siano troppo pesanti? Altra soluzione potrebbe essere quella di appendere al div contenitore un testo che cancellerai a caricamento avvenuto, oppure impostare di default il div contenitore con un immagine di sfondo "d'attesa" e a caricamento avvenuto modificare lo sfondo togliendola, sono solo ipotesi vanno provate e testate e non so quanto possono essere + leggere.

[maforast]

intendo che se con semplici modifiche al css con jquery carosle hanno fatto questo perchè non posso fare lo stesso per i jquery tabs.

Mi fai un esempio di ciò che dici?

[cavicchiandrea]

Al volo seconda ipotesi:
//css
#result{
background: center center url(images/tua_immagine_attesa.png) no-repeat;
}
//fine css
//jquery
$('#result').load('ajax/test.html', function() {
$('#result').css('background','');
});
//fine jquery

[maforast]

Originariamente inviato da cavicchiandrea
Al volo seconda ipotesi:
//css
#result{
background: center center url(images/tua_immagine_attesa.png) no-repeat;
}
//fine css
//jquery
$('#result').load('ajax/test.html', function() {
$('#result').css('background','');
});
//fine jquery

Scusa il test.html sarebbe la pagina che devo caricare giusto? nel mio caso ho la pagina index.php in cui foglio far apparire le immagini di loading al caricamento di alcuni elementi.

quindi nel mio caso al posto di test.html devo mettere index.php e il id result dove lo devo inserire?

Grazie

[cavicchiandrea]

http://javascript.html.it/guide/leggi/168/guida-jquery/