Wie kann ich ein Bild vorab laden, um es später mit jQuery als Hintergrundbild festzulegen?

Question

Ich versuche, ein Bild vorab zu laden, also wenn ich es als Hintergrundbild einstellen muss, ist es fertig und es wird nicht während des CSS-Übergangs geladen. Ich habe versucht, es mit der AJAX load() -Methode zu machen, aber ich denke, ich sollte es ohne AJAX machen können. Ich bin mir nicht sicher, dass so etwas funktionieren würde, da ich kein IMG-Tag oder src benötige, sondern so etwas wie die direkte URL des Hintergrundbilds, damit ich es später als Hintergrundbild einstellen kann.

var img = new Image(); img.src = 'img.jpg'; 

Das ist, was ich bisher getan habe:

$(document).ready(function() { 
$('#LogoContainer').hover(function() { 
    $('#LogoMainPart').fadeTo('slow', 0.3); 
    $('#LogoOtherPart').fadeTo('slow', 1); 
    $('#Introduction').css('background-image', 'url(hoverbackground.jpg)'); 
}, function() { 
    $('#LogoMainPart').fadeTo('slow', 1); 
    $('#LogoOtherPart').fadeTo('slow', 0.3); 
    $('#Introduction').css('background-image', 'url(background.jpg)'); 
}); 
}); 

Answer 1

Nach dem Erstellen des Bildobjekt mit

var myImage = new Image(); 

die src des Bildes Weisen, die das Bild in die Last Browser-Cache wie folgt:

myImage.src = 'my-bknd.jpg'; 

Nun, da es im Browser-Cache ist, können Sie es zum DOM hinzufügen, wenn Sie es so wählen: