Come visualizzare l’immagine di caricamento mentre l’immagine reale sta scaricando

A volte le immagini richiedono del tempo per essere visualizzate nel browser. Voglio mostrare un’immagine occupata mentre l’immagine reale è in fase di download, e quando l’immagine viene scaricata, l’immagine occupata viene rimossa e l’immagine reale deve essere mostrata. Come posso farlo con JQuery o qualsiasi javascript?

Puoi fare qualcosa del genere:

// show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); 

Assegna un evento di load all’immagine che si triggers quando l’immagine ha terminato il caricamento. Prima di ciò, è ansible mostrare l’immagine del caricatore.

Basta aggiungere un’immagine di sfondo a tutte le immagini usando css:

 img { background: url('loading.gif') no-repeat; } 

Uso una tecnica simile a ciò che @Sarfraz ha pubblicato, tranne che per hide gli elementi, ho solo manipolato la class dell’immagine che sto caricando.

  ...  ...  

Nel mio caso, a volte le immagini non vengono caricate, quindi gestisco l’evento onerror per modificare la class dell’immagine in modo da visualizzare un’immagine di errore (anziché l’icona dell’immagine spezzata del browser).

Invece di fare questo metodo quotato da https://stackoverflow.com/a/4635440/3787376 ,

Puoi fare qualcosa del genere:

 // show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); 

Assegna un evento di load all’immagine che si triggers quando l’immagine ha terminato il caricamento. Prima di ciò, è ansible mostrare l’immagine del caricatore.

puoi usare una diversa funzione jQuery per far svanire l’immagine di caricamento, quindi essere nascosta:

 // Show the loading image. $('#loader_img').show(); // When main image loads: $('#main_img').on('load', function(){ // Fade out and hide the loading image. $('#loader_img').fadeOut(100); // Time in milliseconds. }); 

“Una volta che l’opacità raggiunge 0, la proprietà dello stile di visualizzazione è impostata su none.” http://api.jquery.com/fadeOut/

Oppure non è ansible utilizzare la libreria jQuery perché esistono già semplici metodi JavaScript cross-browser.

Utilizzare un costruttore javascript con un callback che si triggers quando l’immagine ha terminato il caricamento in background. L’ho usato e funziona perfettamente per me cross-browser. Ecco il thread con la risposta .