Lauftext/Marquee selbst gemacht

[Jeena Paradies]

Hallo,

Hier mal der komplette Code: http://pastebin.com/R4cQ2gvt
Vielleicht gibts ja noch Verbesserungshinweise :D

window.setTimeout("newsticker.loop()","75");

Aah du hast das so schön als Objekt gekapselt und hier benutzt du das globale Objekt window.newsticker, das ist schade, denn dann kann man nur einen Ticker auf der Seite haben und nicht mehrere unabhängige. Du solltest da eher das gerade aufgerufene Objekt nutzen, z.b. so:

setTimeout(this.loop, 75);

Ich glaube ich würde da es sich um eine Animation handelt gleich requestAnimationFrame() nutzen denn da ist eher sichergestellt dass das ganze smooth läuft, vor allem auch dass die framerate runtergeht wenn das Tab nicht angezeigt wird und so Scherze.

Damit ich das in allen Browsern nutzen kann und auch ein Fallback für die die das nicht können habe, habe ich mir das hier gebaut:

var requestAnimFrame =  (function(){  
  
    var _setTimeout = function( callback ){  
        setTimeout(callback, 1000 / 60);  
    }  
  
    if (typeof window != 'undefined') {  
  
        return  window.requestAnimationFrame       ||  
                window.webkitRequestAnimationFrame ||  
                window.mozRequestAnimationFrame    ||  
                window.oRequestAnimationFrame      ||  
                window.msRequestAnimationFrame     ||  
                _setTimeout;  
  
    } else {  
        return _setTimeout;  
    }  
  
})();

und man benutzt es dann so:

NewsTicker.prototype.loop = function()  
{  
        // Damit diese Funktion in 16 milisekunden wieder automatisch aufgerufen wird.  
        requestAnimFrame(this.loop);  
  
        if(this.container == null)  
                this.init();  
        else  
        {  
            // ...  
        }  
}

Wie im Kommentar schon geschrieben wird hier alle 16 Milisekunden aufgerufen was einer Framerate von 60 entspricht, was so standard für Animationen ist.

Falls du eine Stunde Zeit übrig hast kannst du dir mal Google I/O 2012 - Jank Busters: Building Performant Web Apps zu diesem Thema angucken.

Jeena