diff --git a/src/button.js b/src/button.js index a73e42c0..4b98faf3 100644 --- a/src/button.js +++ b/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 ) { diff --git a/src/drawer.js b/src/drawer.js index ed9e588c..2fe5c4ba 100644 --- a/src/drawer.js +++ b/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 ); + }); } diff --git a/src/openseadragon.js b/src/openseadragon.js index af41bf6a..c70d7a7b 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -500,7 +500,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY - + //VIEWPORT NAVIGATOR SETTINGS showNavigator: true, //promoted to default in 0.9.64 navigatorElement: null, @@ -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 diff --git a/src/viewer.js b/src/viewer.js index bbcd2fd3..2a6cf9dc 100644 --- a/src/viewer.js +++ b/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 ) ); }