Bizarre Javascript bug-swapping dans les images

Question

J'ai ce bug fou qui ne vient que parfois. C'était évident quand je développais ce site mais ensuite il a disparu pendant environ une semaine et maintenant que le site est en ligne c'est de retour. Je ne pense pas que cela ait quelque chose à voir avec mon hébergement, car il y a aussi des bogues locaux.

Mon problème est que je permutant la valeur css background-image sur chaque clic. Cela fonctionne parfaitement dans 95% des cas, mais parfois sur une durée de 15 minutes environ, il n'affiche que la moitié des images, apparemment de manière aléatoire. Le plus étrange est que si vous regardez dans l'inspecteur, vous pouvez voir que le script a correctement changé la valeur de css, mais l'image n'a tout simplement pas été chargée. Je ne sais pas pourquoi!

Voici le site: shouldivoteoliver.com Il est sur la page « propagande ».

Voici le Javascript:

$(document).ready(function() { 
    var n=0; 
     $(".button").click(function(){ 
      if (n===5){ 
       $('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin')); 
       n++; 
       $("#putin").css("background-image","none"); 
       } 
      else{ 
       $('video').remove(); 
       $("#putin").css("background-image",function(){ 
        if (n>13){ 
        n=1; 
        return ('url(images/1.jpg)'); 
        } 
        else{ 
        n++; 
        return ('url(images/'+n+'.jpg)'); 
        } 
        }); 
      } 
     }); 
}); 

Answer 1

Je suggère d'utiliser une image de fond comme une image-objet et en changeant la position de fond comme opposition à changer la propriété d'image d'arrière-plan.

Voici un tutoriel que je googlé

http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/

Answer 2

J'ai essayé de passer par toutes les diapositives sur la propagande à deux reprises mais je n'ai pas rencontré aucun problème. Je ne sais pas ce qui se passe, mais vous pouvez rendre votre code un peu plus propre et plus lisible en créant simplement un tableau pour stocker le contenu de chaque "diapositive", et simplement le parcourir en un clic de souris. Je suppose que vous n'avez pas vraiment besoin de définir la propriété d'arrière-plan de cette div et vous pourriez simplement inclure une image.
Juste un conseil, pas sûr si cela aidera votre problème, mais rendra cette chose plus gérable et plus facile d'ajouter plus de choses.

Answer 3

Voici un one-liner

valeur d'échange à l'index i1 avec i2

arr.slice(0,i1).concat(ar[i2],ar.slice(i1+1,i2),ar[i1],.slice(i2+1))