L'animation d'image continue à demander les images

Question

Je teste le code dans IE7, FF, Chrome, Safari et ce problème se produit dans Firefox seulement.

J'ai vérifié que le problème se produisait seulement dans FF 3.5.x, mais pas FF 3.0.x.

Je veux faire une animation d'image qui a 10 images au total.

Actuellement, j'utilise le code suivant pour le faire:

for (var i=1;i<=10;i++){ 
    img[i] = new Image(); 
    img[i].src = "images/survey/share_f"+i+".jpg" 
} 

var cornerno = 0; 
function imganimate(){ 
    $("#surveyicon").attr("src",img[cornerno].src); 
    //some logic to change the cornerno 
    setTimeout("imganimate()",1000); 
} 

Et puis changer une boucle de src à de l'élément à travers le réseau « img ». Cependant, firefox continue de demander des images continues (je m'attends à ce qu'il ne demande qu'une seule fois chaque image unique).

Que dois-je faire?

Answer 1

Cela semble un bug dans FF3.5.x. Vous ne savez pas si le bogue a déjà été corrigé.

Answer 2

Vous avez déjà créé dix nœuds DOM, défini leur src et chargé les images. Pourquoi voudriez-vous définir le src à nouveau? Vous voulez faire pivoter ces dix nœuds dedans et dehors maintenant. Vous pouvez basculer vers style.display ou supprimer et insérer les nœuds.

Voici ma suggestion. Je suis peu familiarisés avec JQuery donc il peut y avoir quelques raccourcis supplémentaires que j'ai oublié:

var imgAmt = 10; 
img = []; 
for (var i=1;i<=imgAmt;i++){ 
    img[i] = document.createElement("img"); 
    img[i].src = "images/survey/share_f"+i+".jpg" 
    img[i].style.display = "none"; 
    $("#surveyicon").appendChild(img[i]); 
} 
imganimate(); 

var cornerno = 0; 
function imganimate(){ 
    cornerno++; 
    cornerno = cornerno > imgAmt ? 1 : cornerno; 
    for (var i=1;i<=imgAmt;i++){ 
     // hide all images but the index that matches cornerno: 
     img[i].style.display = i==cornerno ? "" : "none"; 
    } 
    setTimeout(imganimate,1000); 
} 

Answer 3

img est non défini. ajoutez simplement une ligne "var img = new Array();" avant "for (var i = 1; i < = 10; i ++) {"

var img = new Array(); 

for (var i=1;i<=10;i++){ 
    img[i] = new Image(); 
    img[i].src = "images/survey/share_f"+i+".jpg"; 

} 

var cornerno = 0; 
function imganimate(){ 
    cornerno %= 10; 
    cornerno++; 
    $("#surveyicon").attr("src",img[cornerno].src); 

    setTimeout("imganimate()",1000); 
} 

imganimate(); 

Answer 4

Essayez composer les images en un seul fichier d'image comme une carte de sprite et ensuite utiliser le positionnement CSS pour déplacer l'image autour comme image de fond. Ce sera beaucoup plus rapide et éviter tout rechargement.