Chargement de l'image avant la commutation de l'arrière-plan div dans jquery

Question

J'ai une page Web dans laquelle je veux changer l'image d'arrière-plan d'un div en réponse à une interaction de l'utilisateur. Ce que j'ai jusqu'ici est:

function updateImg() { 
    imgurl=buildImgURL(); // constructs a URL based on various form values 
    $('#mainImage').css("background-image", "url("+imgurl+")"); 
} 

Cela fonctionne exactement comme je le veux à l'exception d'une chose. En raison d'une combinaison d'images d'arrière-plan relativement volumineuses et d'un serveur relativement lent (dont aucun ne peut facilement être réparé), le chargement de l'image prend un certain temps. Ainsi, lorsque la fonction updateImg() est appelée, la div devient blanche pendant une demi-seconde environ avant le chargement de la nouvelle image d'arrière-plan. Ce que je veux, c'est que l'ancienne image d'arrière-plan reste jusqu'à ce que la nouvelle image soit chargée, puis qu'elle change instantanément. Est-ce possible?

L'image d'arrière-plan est générée à la volée par le serveur, de sorte qu'aucune mise en cache ou préchargement côté client n'est possible.

Answer 1

Qu'en est-il de régler l'image sur un élément vide?

$("<img id='loaderImg' src='"+imgUrl+"' onload='setBg(this.src)'/>"); 

Puis, quand l'image est chargée

function setBg(imgUrl) { 
    $("#mainImage").css("background-image", "url("+imgUrl+")"); 
    $("#loaderImg").remove(); 
} 

De cette façon, l'image serait chargée dans une image qui ne sera jamais affiché et mis à l'arrière-plan lorsque l'image est entièrement chargée (et également mis en cache)

N'a pas testé cela, mais je pense que cela devrait fonctionner.

Answer 2

Vous pouvez définir une classe CSS avec la propriété background-image définie sur l'image, puis dans votre fonction updateImg(), définissez la classe de cette div au lieu de modifier directement la propriété. Cela pourrait atténuer le problème.

Quelque chose comme:

function updateImg() { 
    imgurl=buildImgURL(); // constructs a URL based on various form values 
    $('#mainImage').addClass('imageClassName'); 
} 

Et puis dans votre CSS:

.imageClassName { 
    background-image: url([url to image]); 
} 

Answer 3

Puisque vous ne pouvez pas précharger votre image, vous pouvez le faire:

1. prélecture un " chargement .. "image
2. définir l'image" chargement .. "comme arrière-plan de votre div tandis que yo Si votre image réelle est en cours de cuisson
3. une fois que votre image réelle est disponible, faites vos affaires.

Veuillez ne pas me demander d'écrire jQuery pour cela. Son assez simple :)

Cheers,

HJR.