Merge pull request #25 from openseadragon/requestanimationframe

Requestanimationframe

src/button.js

@@ -242,9 +242,9 @@ $.extend( $.Button.prototype, $.EventHandler.prototype, {
 
 
 function scheduleFade( button ) {
-    window.setTimeout(function(){
+    $.requestAnimationFrame(function(){
         updateFade( button );
-    }, 20 );
+    });
 }
 
 function updateFade( button ) {

src/drawer.js

@@ -1018,9 +1018,9 @@ function finishLoadingImage( image, callback, successful, jobid ){
     if ( jobid ) {
         window.clearTimeout( jobid );
     }
-    window.setTimeout( function() {
+    $.requestAnimationFrame( function() {
         callback( image.src, successful ? image : null);
-    }, 1 );
+    });
 
 }
 

src/openseadragon.js

@@ -1679,6 +1679,71 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
     };
         
 
+    // Adding support for HTML5's requestAnimationFrame as suggested by acdha
+    // implementation taken from matt synders post here:s
+    // http://mattsnider.com/cross-browser-and-legacy-supported-requestframeanimation/
+    (function( w ) {
+
+        // most browsers have an implementation
+        w.requestAnimationFrame = w.requestAnimationFrame ||
+            w.mozRequestAnimationFrame || 
+            w.webkitRequestAnimationFrame ||
+            w.msRequestAnimationFrame;
+
+        w.cancelAnimationFrame = w.cancelAnimationFrame ||
+            w.mozCancelAnimationFrame || 
+            w.webkitCancelAnimationFrame ||
+            w.msCancelAnimationFrame;
+
+
+        // polyfill, when necessary
+        if ( w.requestAnimationFrame ) {
+            //we cant assign window.requestAnimationFrame directly to $.requestAnimationFrame
+            //without getting Illegal Invocation errors in webkit so call in a
+            //wrapper
+            $.requestAnimationFrame = function( callback ){ 
+                return w.requestAnimationFrame( callback );
+            };
+            $.cancelAnimationFrame = function( requestId ){ 
+                return w.cancelAnimationFrame( requestId );
+            };
+        } else {
+            var aAnimQueue = [],
+                iRequestId = 0,
+                iIntervalId;
+
+            // create a mock requestAnimationFrame function
+            $.requestAnimationFrame = function( callback ) {
+                aAnimQueue.push( [ ++iRequestId, callback ] );
+
+                if ( !iIntervalId ) {
+                    iIntervalId = setInterval( function() {
+                        if ( aAnimQueue.length ) {
+                            aAnimQueue.shift( )[ 1 ](+new Date());
+                        } else {
+                            // don't continue the interval, if unnecessary
+                            clearInterval( iIntervalId );
+                            iIntervalId = undefined;
+                        }
+                    }, 1000 / 50);  // estimating support for 50 frames per second
+                }
+
+                return iRequestId;
+            };
+
+            // create a mock cancelAnimationFrame function
+            $.cancelAnimationFrame = function( requestId ) {
+                // find the request ID and remove it
+                for ( var i = 0, j = aAnimQueue.length; i < j; i += 1 ) {
+                    if ( aAnimQueue[ i ][ 0 ] === requestId ) {
+                        aAnimQueue.splice( i, 1 );
+                        return;
+                    }
+                }
+            };
+        }
+    })( window );
+
     /**
      * @private
      * @inner

src/viewer.js

@@ -234,9 +234,9 @@ $.Viewer = function( options ) {
         );
     }
 
-    window.setTimeout( function(){
+    $.requestAnimationFrame( function(){
         beginControlsAutoHide( _this );
-    }, 1 );    // initial fade out
+    } );    // initial fade out
 
 };
 
@@ -1079,9 +1079,9 @@ function scheduleUpdate( viewer, updateFunc, prevUpdateTime ){
         deltaTime;
 
     if ( THIS[ viewer.hash ].animating ) {
-        return window.setTimeout( function(){
+        return $.requestAnimationFrame( function(){
             updateFunc( viewer );
-        }, 1 );
+        } );
     }
 
     currentTime     = +new Date();
@@ -1090,17 +1090,17 @@ function scheduleUpdate( viewer, updateFunc, prevUpdateTime ){
     targetTime      = prevUpdateTime + 1000 / 60;
     deltaTime       = Math.max( 1, targetTime - currentTime );
     
-    return window.setTimeout( function(){
+    return $.requestAnimationFrame( function(){
         updateFunc( viewer );
-    }, deltaTime );
+    } );
 }
 
 
 //provides a sequence in the fade animation
 function scheduleControlsFade( viewer ) {
-    window.setTimeout( function(){
+    $.requestAnimationFrame( function(){
         updateControlsFade( viewer );
-    }, 20);
+    });
 }
 
 
@@ -1394,7 +1394,7 @@ function endZooming() {
 
 
 function scheduleZoom( viewer ) {
-    window.setTimeout( $.delegate( viewer, doZoom ), 10 );
+    $.requestAnimationFrame( $.delegate( viewer, doZoom ) );
 }