I've just started programming with JavaScript and I am currently working on this hobby website project of mine. The site is supposed to display pages filled with product images than can be "panned" to either the left or right. Each "page" containing about 24 medium sized pictures, one page almost completely fills out an entire screen. When the user chooses to look at the next page he needs to click'n'drag to the left (for example) to let a new page (dynamically loaded through an AJAX script) slides into the view.
This requires for my JavaScript to "slide" two of these mentioned pages synchronously by the width of a screen. This results in a really low framerate. Firefox and Opera lag a bit, Chrome has it especially bad: 1 frame of animation takes approx. 100 milliseconds, thus making the animation look very "laggy".
I do not use jQuery, nor do I want to use it or any other library to "do the work for me". At least not until I know for sure that what I am trying to do can not be done with a couple of lines of self-written code.
So far I have figured out that the specific way I manipulate the DOM is causing the performance-drop. The routine looks like this:
function slide(){
this.t=new Date().getTime()-this.msBase;
if(this.t>this.msDura)
{
this.callB.call(this.ref,this.nFrames);
return false;
}
//calculating the displacement of both elements
//
this.pxProg=this.tRatio*this.t;
this.eA.style.left=(this.pxBaseA+this.pxProg)+'px';
this.eB.style.left=(this.pxBaseB+this.pxProg)+'px';
if(bRequestAnimationStatus)requestAnimationFrame(slide.bind(this));
else window.setTimeout(slide.bind(this),16);
this.nFrames++;
};
...
//starting an animation
//
slide.call({ 'eA':theMiddlePage,
'eB':neighboorPage,
'callB':theCallback,
'msBase':new Date().getTime(),
'msDura':400,
'tRatio':((0-pxScreenWidth)/400),
'nFrames':0,
'ref':myObject,
'pxBaseA':theMiddlePage.offsetLeft,
'pxBaseB':neighboorPage.offsetLeft
});
I've noticed that when I let the AJAX script load less images into each page, the animation becomes much faster. The separate images seem to create more overhead than I have expected. Is there another way to do this?
(Reposted from Stack Overflow here)