From 35d8598fe3f9e9e61f80569c6d76ca52a024323c Mon Sep 17 00:00:00 2001
From: badlogic <contact@badlogicgames.com>
Date: Sat, 3 Sep 2016 14:25:49 +0200
Subject: [PATCH] [ts] Visibility check is only done on scroll events, saves
 some CPU

---
 spine-ts/webgl/demos/utils.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/spine-ts/webgl/demos/utils.js b/spine-ts/webgl/demos/utils.js
index 1b42a26ce..6cae45179 100644
--- a/spine-ts/webgl/demos/utils.js
+++ b/spine-ts/webgl/demos/utils.js
@@ -15,9 +15,10 @@ var spineDemos;
 		spineDemos.requestAnimationFrame(loop);
 		var demos = spineDemos.demos;		
 		for (var i = 0; i < demos.length; i++) {
-			var canvas = demos[i].canvas;
-			var renderFunc = demos[i].renderFunc;
-			if (spineDemos.isElementInViewport(canvas)) {
+			var demo = demos[i];
+			var canvas = demo.canvas;
+			var renderFunc = demo.renderFunc;
+			if (demo.visible) {
 				if (spineDemos.log) console.log("Rendering " + canvas.id);
 				renderFunc();
 			};
@@ -32,20 +33,25 @@ var spineDemos;
 	}
 
 	spineDemos.setupRendering = function (canvas, renderFunc) {
+		var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
+		$(window).on('DOMContentLoaded load resize scroll', function() {
+			spineDemos.checkElementVisible(demo);
+		});
+		spineDemos.checkElementVisible(demo);
 		setupLoop();
-		spineDemos.demos.push({canvas: canvas, renderFunc: renderFunc});		
+		spineDemos.demos.push(demo);
 	};
 
 	spineDemos.requestAnimationFrame = function(func) {
 		requestAnimationFrame(func);
 	}
 
-	spineDemos.isElementInViewport = function (canvas) {
-		var rect = canvas.getBoundingClientRect();
+	spineDemos.checkElementVisible = function (demo) {
+		var rect = demo.canvas.getBoundingClientRect();
 		var x = 0, y = 0;
 		var width = (window.innerHeight || document.documentElement.clientHeight);
 		var height = (window.innerWidth || document.documentElement.clientWidth);
-		return rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;		 
+		demo.visible = rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;		 
 	};
 
 	spineDemos.setupWebGLContext = function (canvas) {