Come visualizzare l'immagine di caricamento mentre viene scaricata l'immagine effettiva

Question

A volte le immagini richiedono del tempo per il rendering 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?

Answer 1

si può fare qualcosa di simile:

// show loading image 
$('#loader_img').show(); 

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

si assegna load evento all'immagine che spara quando l'immagine ha terminato il caricamento. Prima di ciò, è possibile mostrare l'immagine del caricatore.

Answer 2

Basta aggiungere un'immagine di sfondo a tutte le immagini usando i CSS:

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

Answer 3

Io uso una tecnica simile a quello che ha postato @Sarfraz, tranne che invece di elementi nascondere, ho appena manipolare la classe dell'immagine che ho' m carico.

<style type="text/css"> 
.loading { background-image: url(loading.gif); } 
.loaderror { background-image: url(loaderror.gif); } 
</style> 
... 
<img id="image" class="loading" /> 
... 
<script type="text/javascript"> 
    var img = new Image(); 
    img.onload = function() { 
     i = document.getElementById('image'); 
     i.removeAttribute('class'); 
     i.src = img.src; 
    }; 
    img.onerror = function() { 
     document.getElementById('image').setAttribute('class', 'loaderror'); 
    }; 
    img.src = 'http://path/to/image.png'; 
</script> 

Nel mio caso, a volte le immagini non vengono caricate, così ho gestire l'evento OnError per modificare la classe immagine in modo che visualizzi un'immagine di sfondo errore (piuttosto che l'icona immagine spezzata del browser).

Answer 4

Utilizzare un costruttore javascript con un callback che si attiva quando l'immagine ha terminato il caricamento in background. L'ho usato e funziona perfettamente per me cross-browser. Ecco lo thread with the answer.

Answer 5

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

si può fare qualcosa di simile:

// show loading image 
$('#loader_img').show(); 

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

Si assegnano load evento all'immagine che spara quando l'immagine ha carico finito . Prima di ciò, è possibile mostrare l'immagine del caricatore.

è possibile utilizzare una funzione di jQuery diversa per rendere il caricamento delle immagini svaniscono, poi essere nascosti:

// 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 lo 0, la proprietà di stile di visualizzazione è impostata su Nessuno. " http://api.jquery.com/fadeOut/

O non era possibile utilizzare la libreria jQuery, perché ci sono già semplici metodi JavaScript cross-browser.