Comment puis-je précharger une image pour la définir plus tard en tant qu'image de fond avec jQuery?

Question

J'essaye de précharger une image alors quand j'ai besoin de la définir en tant qu'image de fond, elle est prête et elle ne se chargera pas pendant la transition CSS. J'ai essayé de le faire en utilisant la méthode load() AJAX, mais je pense que je devrais être capable de le faire sans AJAX. Je ne suis pas sûr que quelque chose comme ça fonctionnerait puisque je n'ai pas besoin d'une balise img ou src, mais quelque chose comme stocker l'URL directe de l'image d'arrière-plan afin que je puisse la définir comme image d'arrière-plan.

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

C'est ce que je l'ai fait jusqu'à présent:

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

Après avoir créé l'objet d'image avec

var myImage = new Image(); 

Affectez le src de cette image qui charge l'image dans la cache du navigateur comme ceci:

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

Maintenant que ce soit dans le cache du navigateur, vous pouvez l'ajouter au DOM chaque fois que vous choisissez comme ceci:

document.getElementById('myDiv').style.background = 'url(my-bknd.jpg)';