Visualizzazione risultati 1 fino 5 di 5

Discussione: loading spinner prima dell'immagine

  1. #1
    Guest

    Predefinito 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!
    Ultima modifica di bcdesign : 26-11-2019 alle ore 19.29.44

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!

  3. #3
    Guest

    Predefinito

    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...

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!

  5. #5
    Guest

    Predefinito

    Potresti farmi un esempio?

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •