Bild in Javascript vorladen und dann erst einblenden

Will man per Javascript/JQuery ein Bild ausblenden und ein anderes einblenden, empfiehlt es sich, das neue Bild vorzuladen bevor es eingeblendet wird. Folgender Code lädt ein Bild im Hintergrund und blendet es erst ein, wenn es vollständig geladen ist:

var newImageSrc = '/img/newImage.jpg';
var time = 200;

var tmpImg = new Image();
tmpImg.src = newImageSrc;
tmpImg.onload = function () {         
    $('#img').fadeOut(time, function () {
         $('#img').attr("src", newImageSrc);
         $('#img').fadeIn(time, function() {
             // ... extra Code wenn Bild eingeblendet ist ...
         });
    });
};

Die Variable tmpImg dient hier nur als Platzhalter-Variable, welche den Browser veranlasst, das entsprechende Bild im Hintergrund zu laden. Die onload-Funktion wird aufgerufen, wenn er damit fertig ist und nun kann das alte Bild ausgeblendet werden, das src-Attribut des Bildes umgestellt und dann wieder eingeblendet werden.

Schreibe einen Kommentar