Preload con GIF al click!

[-AA-]

Ciao a Tutti
Mi sono fatto 1 "pezzettino" di funzioncina che cambia immagine al click sui "pallini

Questo il JS

    $('.Pointer li').click(function (){
         $('.Pointer li').css('backgroundPosition', '0px 0px');

        //this is for slide        
          var ID = this.id;
          $(".Slide").stop().fadeOut(400, function() {
             var path = "./images/demo/";
              this.src = path + ID;
            this.onload = function(){
              $(this).fadeIn(400);
            };
          });
        //this is for slide
        
        $(this).css('backgroundPosition', '0px -17px');        
    });

questo il mio HTML

    <div class="PicProd">
            <ul><li><img src="./images/demo/1.jpg" class="Slide" /></li></ul>
        <div class="Pointer">
            <ul>
            <li id="1.jpg"></li>
            <li id="2.jpg"></li>
            <li id="3.jpg"></li>
            </ul>
        </div>
    </div>

allora in locale funziona bene, e, magari il JS che ho scritto non è stupendo...ma fa quel che volevo, non sono 1 esperto ma sto cercando di "arrangiarmi" il + possibile.

So cmq che una volta online questo click potrebbe subire dei ritardi nel caricare l'immagine, come posso per cui implementare un "loading" quando l'immagine è in caricamento?

[cavicchiandrea]

Non credo sia un problema di caricamento immagine dato che la stessa caricata inzialmente dato che la sposti -17px

[-AA-]

Non credo sia un problema di caricamento immagine dato che la stessa caricata inzialmente dato che la sposti -17px

Ciao Andrea, grazie per l'attenzione
In realtà il mio dubbio non è relativo all'immagine che sposto di background
ma quella che viene richiamata sfruttando l'elemento l'ID del LI

<li id="2.jpg"></li>
che potrebbe essere grandina...

al click sul LI va a sostituire

<ul><li><img src="./images/demo/1.jpg" class="Slide" /></li></ul>
Con un Fade...

è li dove vorrei inserire il Preload
per il resto il mio script funziona bene per ora

[cavicchiandrea]

In effetti non avevo letto bene, io di solito faccio i preload con i css inserisco un div nascosto (display:none) a fondo pagina (poco prima della chiusura del body) con dentro le immagini che devo caricare, non so se può esserti utile

[-AA-]

In effetti non avevo letto bene, io di solito faccio i preload con i css inserisco un div nascosto (display:none) a fondo pagina (poco prima della chiusura del body) con dentro le immagini che devo caricare, non so se può esserti utile

Si è una buona idea la tua, io devo fare un dettagli aorticolo per uno SHOP dove una delle richieste principali è la velocità di caricamento della pagina, se carico in preload come dici tu però mi rallenta la pagina giusto?
le immagini sono grandi

[cavicchiandrea]

Prova non so dirti se ti sta bene ok, altrimenti cerchi altre strade, ricordandoti che la pesantezza dell'immagine influisce ma non è l'unica componente server con query performanti, codice pulito, traffico non eccessivo, browser recenti.