Wie wird das Ladebild angezeigt, während das aktuelle Bild heruntergeladen wird?

Question

Manchmal dauert es einige Zeit, Bilder im Browser zu rendern. Ich möchte ein aktives Bild anzeigen, während das aktuelle Bild heruntergeladen wird, und wenn das Bild heruntergeladen wird, wird das aktive Bild entfernt und das tatsächliche Bild sollte angezeigt werden. Wie kann ich das mit JQuery oder irgendeinem Javascript tun?

Answer 1

Sie können etwas tun:

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

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

Sie ordnen load Ereignis in das Bild, das ausgelöst wird, wenn die Bild fertig geladen ist. Zuvor können Sie Ihr Loader-Image anzeigen.

Answer 2

Fügen Sie einfach ein Hintergrundbild für alle Bilder mit CSS:

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

Answer 3

Ich verwende eine ähnliche Technik, was @Sarfraz geschrieben, außer stattdessen Elemente versteckt, ich manipulieren nur die Klasse des Bildes, das ich m Laden.

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

In meinem Fall, manchmal Bilder werden nicht geladen, so dass ich das handhaben onerror Ereignis die Bildklasse zu ändern, damit es einen Fehler Hintergrundbild zeigt (anstelle des gebrochenen Bild Symbol des Browsers).

Answer 4

Verwenden Sie einen JavaScript-Konstruktor mit einem Rückruf, der ausgelöst wird, wenn das Bild im Hintergrund geladen wurde. Ich benutze es einfach und funktioniert super für mich Cross-Browser. Hier ist die thread with the answer.

Answer 5

Statt nur von diese zitierte Methode tun https://stackoverflow.com/a/4635440/3787376,

Sie etwas tun können:

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

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

Sie ordnen load Ereignis in das Bild, das ausgelöst wird, wenn die Bild fertig geladen hat . Zuvor können Sie Ihr Loader-Image anzeigen.

Sie eine andere jQuery-Funktion verwenden können, um das Laden Bild abklingen zu machen, dann versteckt werden:

// 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. 
}); 

„Sobald die Opazität 0 erreicht, wird die Anzeigestil Eigenschaft auf none gesetzt. " http://api.jquery.com/fadeOut/

Oder Sie könnten nicht die jQuery-Bibliothek verwenden, da es bereits einfache Cross-Browser JavaScript-Methoden.