Une fois la page chargée, charger une autre image et l'utiliser pour remplacer l'image BackGround actuelle de la page

Question

La page d'accueil de mon site a une assez grande image en arrière-plan, bien sûr que je l'ai réduite au minimum va encore prendre un moment pour charger sur les connexions lentes.

Donc, si l'utilisateur reste sur mon site pendant un moment, je veux changer cette image de fond en une autre. J'ai vu certains des plugins qui sont disponibles pour avoir quelque chose de similaire, mais ils semblent tous charger les images tout d'abord. Ce qui serait lent pour mes objectifs

Donc, je voudrais juste charger la page comme d'habitude. Ensuite, après un peu de retard dans les coulisses charger une autre image et une fois qu'il est chargé, remplacez l'image originale. Est-ce possible?

Answer 1

Bien sûr, définir une balise image dans le corps comme celui-ci: <img id="bgqueue" />

Votre CSS cacherait que:

#bgqueue { 
    display : none; 
} 

Et votre jQuery ressemblerait à quelque chose comme ceci:

setTimeout(function() { 
    $('#bgqueue').attr('src', 'http://someOtherjpg').on('load', function() { 
     $('body').css({background: 'url(' + $(this).attr('src') + ')'}); 
    }); 
}, 30000); 

Alors l'image est chargée dans cette balise d'image derrière les scènes après 30 secondes dans cet exemple, et une fois qu'elle est chargée, le rappel se déclenche et définit l'image d'arrière-plan du corps dans le fichier de cache.

Démo: http://jsfiddle.net/seancannon/TpPkk/