jQuery fadeOut und fadeIn nicht auf Live-Site arbeiten, geht fadeOut/fadeIn schneller als mein aktuelles Bild kann

Question

ich mit diesem Skript diese einfache Webseite erstellt ändern ...

<script type="text/javascript"> 
    var photos = ["indexphotos/1.jpg", "indexphotos/2.jpg", "indexphotos/3.jpg", "indexphotos/4.jpg", 
      "indexphotos/5.jpg"]; 
    var currentPhoto = 1; 
    setInterval(function(){ 
     $('#content img').fadeOut(400, function() { 
      if(currentPhoto == 5) { 
       currentPhoto = 0; 
      } 
      $('#content img').attr("src",photos[currentPhoto]); 
      currentPhoto++; 
      $('#content img').fadeIn(400); 
     }); 
    },5000); 
</script> 

eine Diashow haben, und faden spielt In und Out Fotos durch 5 Fotos. Es funktionierte gut, während ich es lokal entwickelte, aber jetzt, wenn es auf einem Server live ist, hat es Schluckauf. Es wird ausgeblendet, kehrt dann aber zum selben Bild zurück und wechselt schließlich zum neuen Bild, obwohl es auf das Bild wechseln sollte, bevor es wieder eingeblendet wird. Wie das Ein- und Ausblenden ist schneller als das tatsächliche Ändern des Bildes.

Wenn Sie die Seite einmal aktualisieren, funktioniert es gut.

Gibt es eine Möglichkeit, dies besser zu tun, damit dies nicht passiert?

Answer 1

versuchen, ein onload Handler für das Bild, das Hinzufügen, das würde Fade-in erst nach dem Bild (nach dem Ändern src)

$("#content img").one("load", function() { 
    $(this).fadeIn(); //fade in after loading image 
}).attr("src", whatever); //change ti another image 

PS geladen wurde. .one ist hier kein Tippfehler.