Hallo Leute, ich hoffe mir kann hier jemand helfen.
Und zwar habe ich eine kleine Background Animation für meine Seite geschrieben. Die bilder sind als background-image in einem div, der 50% der Seitenbreite einnimmt. Die animation selbst besteht aus 16 einzelbildern die mit timeout gewechselt werden. Das ganze läuft im chrome, Opera und IE auch wie es soll, nur Safari und der Firefox machen hier probleme. Im Safari läuft der bildwechsel langsamer als in den anderen Browsern, was nätürlich Kacke aussieht.
Der Firefox hingegen scheint das timeout komplett zu ignorieren und knallt ein Bild nach dem anderen auf den Bildschirm.
Sitz jetzt schon 2 tage an dem problem und hab zig artikel gelesen die mir aber auch nicht helfen konnten. Hab schon alles mögliche versucht, unter anderem mit anonymen funktionen und schleifen zu arbeiten, aber hilft auch nicht der Firefox und Safari bocken weiterhin.
Ich verstehe nicht warum der firefox das delay beim timeout einfach ignoriert und beim Safari das delay zu hoch ist ?
Meine frage wieso verhalten sich Firefox und Safari da anders als die andern browser ?
Firefox 35.0.1
Safari 5.1.7
Hier mal der Code:
Hier noch das CSS:
Und zwar habe ich eine kleine Background Animation für meine Seite geschrieben. Die bilder sind als background-image in einem div, der 50% der Seitenbreite einnimmt. Die animation selbst besteht aus 16 einzelbildern die mit timeout gewechselt werden. Das ganze läuft im chrome, Opera und IE auch wie es soll, nur Safari und der Firefox machen hier probleme. Im Safari läuft der bildwechsel langsamer als in den anderen Browsern, was nätürlich Kacke aussieht.
Der Firefox hingegen scheint das timeout komplett zu ignorieren und knallt ein Bild nach dem anderen auf den Bildschirm.
Sitz jetzt schon 2 tage an dem problem und hab zig artikel gelesen die mir aber auch nicht helfen konnten. Hab schon alles mögliche versucht, unter anderem mit anonymen funktionen und schleifen zu arbeiten, aber hilft auch nicht der Firefox und Safari bocken weiterhin.
Ich verstehe nicht warum der firefox das delay beim timeout einfach ignoriert und beim Safari das delay zu hoch ist ?
Meine frage wieso verhalten sich Firefox und Safari da anders als die andern browser ?
Firefox 35.0.1
Safari 5.1.7
Hier mal der Code:
Javascript:
$(document).ready(function(){
var count =0;
var timeID;
var intervID;
var bilder=new Array();
/* image to Array */
function setPicture(){
for(i=0;i<16;i++){
bilder[i]=new Image();
bilder[i].src="Bilder/BackgrdLeftBilder/BLA"+(i+1)+".jpg";
console.log('url("'+bilder[i].src+'")');
}
}
function changeImg(){
count++;
$('#backgroundLeft').css('background-image','url('+bilder[count].src+')');
console.log('bildwechsel: url('+bilder[count].src+') :'+count);
if(count===15){
console.log('Im Abbrauchzweig:');
$('#backgroundLeft').css('background-image','url('+bilder[0].src+')');
count=0;
return;
}
timeID=window.setTimeout(changeImg,160);
}
setPicture();
intervID=window.setInterval(changeImg,8000);
});
Hier noch das CSS:
CSS:
#backgroundLeft{display: inline-block; position: absolute; width: 50%; height:121.563em; background-image: url("../Bilder/BackgrdLeftBilder/BLA1.jpg"); background-size:cover; background-repeat:no-repeat; z-index: 1; }