JS Animation probleme mit FF und Safari

[Ampere]

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:

$(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:

#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; }

 

[Quaese]

Hi,

du startest zwei Timer (setTimeout und setInterval). Das ist nicht nur unlogisch, sondern bringt den Programmablauf durcheinander.

Versuch es mal so:

$(document).ready(function() {
    var count = 0,
        timeID,
        intervID,
        bilder = new Array();

    /* image to Array */
    function setPicture() {
        for (i = 0; i < 5; i++) {
            bilder[i] = new Image();
            bilder[i].src = "Bilder/BackgrdLeftBilder/BLA" + (i + 1) + ".jpg";
            console.log('url("' + bilder[i].src + '")');
        }

        changeImg();
    }

    function changeImg() {
        $('#backgroundLeft').css('background-image', 'url(' + bilder[count].src + ')');
        count++;

        if (count === bilder.length) {
            $('#backgroundLeft').css('background-image', 'url(' + bilder[0].src + ')');
            count = 0;
        }

        timeID = window.setTimeout(changeImg, 1000);
    }

    setPicture();
});

Die Verzögerung für setTimeout kannst du ja anpassen.

Ciao
Quaese

 

[Ampere]

Hi Quaese, erstmal Danke für die Hilfe.

Ich habe mir schon gedacht das ein interval und timeout probleme machen.
Ich brauche das interval allerdings da die animation nicht endlos abgespielt werden soll sondern nur alle 8 Sekunden.
Muss mal schauen wie ich das anders lösen kann das die animation nur alle 8 sekunden abgespielt wird.
Der code funktioniert soweit, aber im FF ist immer noch das flackern durch den Bildwechsel zu sehen, man sieht das FF das alte bild löscht, kurzzeitg der hintergrund zu sehen ist, und das neue anzeigt, wogegen es bei den anderen Browser so aussieht als wenn diese über das alte bild drüberzeichnen, kein flackern sondern ein flüssiger übergang.

Hab es jetzt auch mit requestAnimationframe versucht, aber auch hier ist im FF komischerweise das flackern zu sehen, hab versucht das mit opacity erst auszublenden und dan das neue bild wieder einzublenden, aber auch hier flackert es im FF.
Wie kann ich verhindern das der bildwechsel im FF ein flackern verursacht ?

 

[Quaese]

Hi,

das Flackern kann ich hier nicht nachvollziehen. Eventuell sind deine Bilder größer und benötigen Zeit, um geladen zu werden.

Das Problem, eine längere Pause nach dem Durchlauf aller Bilder einzufügen, könntest du dadurch lösen, indem du den Verzögerungswert entsprechend anpasst. Diese Anpassung könnte dort erfolgen, wo auch der Zähler (count) zurückgesetzt wird.

$(document).ready(function() {
    var count = 0,
        timeID,
        intervID,
        bilder = new Array();

    /* image to Array */
    function setPicture() {
        for (i = 0; i < 5; i++) {
            bilder[i] = new Image();
            bilder[i].src = "../bilder/fussball" + (i + 1) + ".jpg";
            console.log('url("' + bilder[i].src + '")');
        }

        changeImg();
    }

    function changeImg() {
        var delay = 500;

        $('#backgroundLeft').css('background-image', 'url(' + bilder[count].src + ')');
        count++;

        if (count === bilder.length) {
            $('#backgroundLeft').css('background-image', 'url(' + bilder[0].src + ')');
            count = 0;
            delay = 8000;
        }

        timeID = window.setTimeout(changeImg, delay);
    }

    setPicture();
});

Ciao
Quaese

 

[Ampere]

Hallo
Hab jetzt herausgefunden das daß flackern im FF, und die verlangsamung im Safari, nur dann auftretten wenn die 2 css animationen, die ich noch auf meiner Seite habe, laufen.
Sind 2 keyframe animationen, wenn ich diese rausnehme dann flackert es auch nicht mehr und läuft flüssig.
FF und Safari scheinen es nicht zu schaffen diese drei animationen flüssig abzuspielen !?
Die Bilder sind übrigens garnicht so gross, so zwschen 150kb und 800kb, alle zusammen ergeben 3,1MB.
Wundert mich schon das FF und Safari das nicht schaffen, da die auslastung, sowohl CPU als auch netzlast, durch die animationen und Bilderladen garnicht hoch war.

Bin jetzt ein etwas anderen weg gegangen ohne background-image. Habe die 16 bilder direkt ins div gesteckt, und mit der funktion blenden ich nun Bild für Bild aus. Das läuft auch mit meinen css animationen flüssig, und ich erspare mir damit auch noch einige requests, da die bilder, im gegensatz zu background-image nicht erst geladen werden müssen.
Danke nochmals für die Hilfe !!!

 

[sheel]

Die Bilder sind übrigens garnicht so gross, so zwschen 150kb und 800kb, alle zusammen ergeben 3,1MB.

Gar nicht so lang her, da wurde einem oft "50-150 KB maximal" für die gesamte
Seite inkl. allen Bildern beigebracht (abgesehen von Bildergalerien etc.)
Würde heute auch nicht schaden, für überflüssige Sachen nicht in den MB-Bereich zu gehen...
(überflüssig = nicht Hauptinhalt)