javascript - Background image Panorama -

i have question regarding scrolling of background image repeats self endlessly. problem having is starts off fast become slower , slower (stuttering etc.). here code:

var panoramatimeoutid = null; var panoramaposition = null; $('.panorama-left').mousedown(function() {     panoramatimeoutid = setinterval(function(){         panoramamove(8, 1)     }, 50); }).bind('mouseup mouseleave', function() {        clearinterval(panoramatimeoutid); }); $('.panorama-right').mousedown(function() {     panoramatimeoutid = setinterval(function(){         panoramamove(8, 2)     }, 50); }).bind('mouseup mouseleave', function() {         clearinterval(panoramatimeoutid); }); function panoramamove(amount, direction) {     var panorama = document.getelementsbyclassname('panorama_foto')[0];     if(panoramaposition == null)     {         panoramaposition = panorama.style.backgroundposition;         panoramaposition = parseint(panoramaposition[0].replace("px",""));     }     if(direction == 1)     {         panoramaposition = panoramaposition + amount;         panorama.style.backgroundposition = panoramaposition+"px";     }     else     {         panoramaposition = panoramaposition - amount;         panorama.style.backgroundposition = panoramaposition+"px";     } } 

and have tried few things optimization.like writing function standard javascript. calculating panoramaposition 1 time before incrementing through variable contains simple int. yet still stutters.

i tried changing interval timing , amount of px still stutters on computers. example site designed tablets on tablets stutters on pc on program not. , mandatory works on tablet.

here jsbin example: http://jsbin.com/upociv/1/edit

hopefully can give tips on how optimize or general suggestions how improve it.

quick note: must supported ipad (1/2/3) galaxy tablets , ie 8+ firefox chrome etc.

instead of moving panoramaposition ever-increasing number of pixels, try moving panoramaposition % (image width) instead.

this way, won't have browser trying invisibly tile background image starting 10,000 pixels left -- instead, never have tile more twice. (you'll avoid small, nonzero, possibility of integer overflow error.)

if(direction == 1) {     panoramaposition = panoramaposition + amount;     panorama.style.backgroundposition = (panoramaposition%1277)+"px"; } else {     panoramaposition = panoramaposition - amount;     panorama.style.backgroundposition = (panoramaposition%1277)+"px"; } 

http://jsbin.com/upociv/2/edit

however, if can implement in css3, should -- modernizr lets detect in javascript whether browser supports css3 transitions , transformations or not.