- Introducing requestAnimationFrame

res/app/app.js

@@ -1,6 +1,11 @@
 require('angular')
 require('angular-route')
 
+//require('se7en-bootstrap-3/build/stylesheets/bootstrap.min.css')
+
+
+
+
 angular.module('app', [
   'ngRoute',
   require('./device-list').name,

res/app/components/stf/screen/fast-image-render/index.js

@@ -391,6 +391,15 @@ function FastImageRender(canvasElement, options) {
   this.options = options || {}
   this.canvasElement = canvasElement
 
+  if (that.options.raf) {
+    that.animLoop = function() {
+      that.raf = that.animLoop)
+
+      // separate render from drawing
+      // render
+    }
+  }
+
   if (true) {
     this.loader = new Image()
     this.loader.onload = function () {
@@ -414,6 +423,13 @@ function FastImageRender(canvasElement, options) {
 
 }
 
+FastImageRender.prototype.destroy = function () {
+
+  cancelAnimationFrame(this.raf)
+
+  // delete onLoad & onError
+}
+
 FastImageRender.prototype.load = function (url, type) {
   var that = this
 
@@ -438,6 +454,7 @@ FastImageRender.prototype.load = function (url, type) {
     }
 
   } else {
+
     this.loader.src = url
   }
 }

res/app/components/stf/screen/fast-image-render/test/performance_test.js

@@ -3,7 +3,7 @@ var frameNumberElement = document.querySelector('#frame-number')
 var totalTimeElement = document.querySelector('#total-time')
 
 var frame = {
-  total: 50,
+  total: 100,
   current: 0
 }
 
@@ -15,7 +15,7 @@ function loadNext() {
 //  var height = 300
   //  loader.src = 'http://placehold.it/' + width + 'x' + height + '?' + Date.now()
   //  loader.src = 'http://lorempixel.com/' + width + '/' + height + '/abstract/Frame-' + frames.current + '/?' + Date.now()
-  imageRender.load('images/screen.webp?' + Date.now())
+  imageRender.load('images/screen.jpg?' + Date.now())
 //  imageRender.load('images/screen.jpg')
 }