Loading tab js

[ertos]

Ciao ragazzi ho delle tab fatte in js, vorrei sapere se posso inserie un loading perchè all'interno vi sono caricate alcuni testi ed immagini che impiegano qualche secondo prima di caricare

Ho provato vari script ma non ci riesco. Qualcuno di buona volonta disposto ad aiutarmi?

[cavicchiandrea]

Senza codice js che genera le tabelle è impossibile, chiaramente se quest'ultimo è molto complesso non è detto che si riesca trovare la soluzione.

[ertos]

Questo il codice utilizzato

<div id="tabs-two">
<ul class="tabs-two fullpage">
<li class="active"><a href="#tab-two1">UNO</a></li>
<li class=""><a href="#tab-two2">DUE</a></li>
<li class=""><a href="#tab-two3">TRE</a></li>
<li class=""><a href="#tab-two4">QUATTRO</a></li>
</ul>

<div class="tab-container-two fullpage">
<div id="tab-two1" class="tab-content-two two">contenuto testo e immagini</div>
<div id="tab-two2" class="tab-content-two">contenuto testo e immagini</div>
<div id="tab-two2" class="tab-content-two">contenuto testo e immagini</div>
<div id="tab-two2" class="tab-content-two">contenuto testo e immagini</div>


</div>

</div>

[ertos]

Questo il codice utilizzato della pagina html

<div id="tabs-two">
  <ul class="tabs-two fullpage">              
    <li class="active"><a href="#tab-two1">UNO</a></li>
    <li class=""><a href="#tab-two2">DUE</a></li>
    <li class=""><a href="#tab-two3">TRE</a></li>
    <li class=""><a href="#tab-two4">QUATTRO</a></li>
  </ul>
 
<div class="tab-container-two fullpage">   
  <div id="tab-two1" class="tab-content-two two">contenuto testo e immagini</div>
  <div id="tab-two2" class="tab-content-two">contenuto testo e immagini</div>
<div id="tab-two3" class="tab-content-two">contenuto testo e immagini</div>
<div id="tab-two4" class="tab-content-two">contenuto testo e immagini</div>
</div>

Questo è il codice JS

$(document).ready(function() {
    //When page loads...
    $(".tab-content").hide(); //Hide all content
    $("ul.tabs li.active").addClass("active").show(); //Activate first tab
    $(".tab-content.two").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab-content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});



$(document).ready(function() {
    //When page loads...
    $(".tab-content-two").hide(); //Hide all content
    $("ul.tabs-two li.active").addClass("active").show(); //Activate first tab
    $(".tab-content-two.two").show(); //Show first tab content

    //On Click Event
    $("ul.tabs-two li").click(function() {

        $("ul.tabs-two li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab-content-two").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

Potrei farrvi vedere direttamente il sito ma preferisco parlarne in privato

[Vindav]

Prima di fare il fadeIn mostra un div di loading, lo nascondi all'evento complete o done (se usi jquery 1.8 o superiore)

http://api.jquery.com/fadein/

[ertos]

Prima di fare il fadeIn mostra un div di loading, lo nascondi all'evento complete o done (se usi jquery 1.8 o superiore)

http://api.jquery.com/fadein/

Beh grazie per la risposta ma sinceramente non so come si fa questo. Dove trovo il fadein? che cosa devo scrivere?

[Vindav]

il fadein lo trovi nel tuo codice:

$("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab-content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

Se non sai nulla di js, nemmeno le basi, chiedi in offro lavoro o aspetti qualche anima pia che abbia volgia e tempo di seguirti passo passo

[ertos]

Grazie per la risposta
Ho provato il tuo codice, praticamente per ogni tab lui ti crea 2 secondi un loading anche quando in realta non c'è ne di bisogno, per esempio clicco sul tab 2 e visualizzo immagini e testo con loading, poi vado sul tab 4 e visualizzo immagini e testo con loading, poi se ritorno su tab 2 non mi deve fare il loading, perchè in realta immagini e testo sono nella cache di firefox, invece mi fa visualizzare sempre 2 secondi di loading anche quando in realita non c'è ne di bisogno.

Io vorrei un loading effettivo, come posso fare?

[Vindav]

il loading è effettivo, è il tempo di animazione, guarda bene il codice, che sia nella cache o meno non ha importanza il tempo dell'animazione è sempre di 2 secondi

[ertos]

Si ho visto che è di 2 secondi, ma scusa se il tab è gia caricato una prima volta e poi lo richiamo una seconda volta perche mi deve fare sempre il loading? Le immagini sono gia caricate.
Non capisco