loading spinner prima dell'immagine

Buonasera, ho una pagina in cui al click di un cursore tramite codice jquery cambio l'attributo di un immagine. Vorrei aggiungere un immagine di loading prima del caricamento di ogni nuova immagine quando faccio una selezione. Potete aiutarmi?


Immagine principale:

Codice HTML:

---

<img src="URL-IMMAGINE" id="immagine-principale">

---

Tasto che al click, tramite il parametro data-url, va a sostituire l'immagine principale richiamandola con il parametro data-tipo

Codice HTML:

---

<div id="selezione1" class="img-fluid selezionabile" data-tipo="immagine-principale" data-url="URL-IMMAGINE"></div>

---

Codice che aggiorna l'immagine:

Codice:

---

    $('.selezionabile').click(function () {

        var id = $(this).attr('id');
        var tipo = $(this).attr('data-tipo');
        var url = $(this).attr('data-url');


        // Aggiorna l'immagine
        $('#' + tipo).attr('src', url);

    });

---

Grazie!

Un'idea potrebbe essere quella di sostituire tutte le immagini con un immagine leggera di default che viene caricata velocemente, poi al caricamento della pagina sostituire l'url con l'immagine voluta. Vedi ad esempio qui: http://forum.it.altervista.org/javas...-immagini.html



Ciao!

Ciao, non credo faccia al caso mio quella tecnica perchè di default ho gia un immagine e quando vado a fare una selezione per sostituirla, finche non si carica la nuova immagine rimane quella precedente. Quello che vorrei fare è una funzione che al click elimina oppure sostituisce l'immagine corrente con un loading spinner che a sua volta viene sostituito dalla nuova immagine una volta caricata dalla pagina, o qualcosa del genere...

Allora sostituisci l'URL con l'immagine di preload e nel frattempo "precarichi" la nuova immagine con nuovo oggetto Image(). Poi gli associ un evento onload e quando è stata caricata assegni l'url all'oggetto img che vuoi veramente mostrare, non so se mi sono spiegato.

Ciao!

Potresti farmi un esempio?