Chargement des images avant de les faire circuler en arrière-plan div?

Question

J'ai une page web standard développée en php en utilisant CSS et actuellement un peu de javascript pour faire défiler certaines images pour une offre div. Vous pouvez voir le site here, ce ne sera pas son lieu de repos final c'est un site temporaire. Si vous regardez la bannière des offres. Quand il passe à l'image suivante, il devient blanc pendant le chargement de l'image suivante. Est-il possible de charger l'image suivante avant de l'appliquer à la propriété d'arrière-plan div? Voici mon atm javascript.

var c=0 
var s 
function offersCycle() 
{ 
    if (c%3==0){ 
    document.getElementById('offers').style.background = "url(/images/1.jpg)"; 
} 
if (c%3==1){ 
    document.getElementById('offers').style.background = "url(/images/2.jpg)"; 
} 
if (c%3==2){ 
    document.getElementById('offers').style.background = "url(/images/3.jpg)"; 
} 
c=c+1 
s=setTimeout("offersCycle()",8000) 

J'ai essayé d'utiliser une série de nouvelles images dans le javascript et les définir avant de les faire du vélo, mais ils ne viseraient pas les CSS car cela repose sur une URL et non une image elle-même? Toutes les idées ont apprécié. Vive, Jordan

Answer 1

je ferais quelque chose comme ceci:

var c = 0, images = ["/images/1.jpg", "/images/2.jpg", "/images/3.jpg"]; 
for(var i=0; i<images.length; i++) { 
    var img = new Image(); 
    img.src = images[i]; 
} 
function offersCycle() { 
    document.getElementById('offers').style.background = "url("+images[c%images.length]+")"; 
    c++; 
} 
var s = setTimeout(offersCycle, 8000); 

En utilisant un tableau, nous simplifions la logique et peut utiliser le même tableau pour précharger les images pour les mettre en cache lorsque chargement de la page . Cela vous permet également d'ajouter autant d'images que vous le souhaitez au tableau sans rien changer.

Answer 2

Vous pouvez précharger les images en utilisant Javascript.

Détails ici: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html