Wait for proper image load event

There is a specific event for when an image has finished loading,
so trigger on that rather than polling. The polling interval of
requestAnimationFrame() can also be very large.

diff --git a/core/display.js b/core/display.js
index 938bb89594a1a9b4d73d2c1b34a46567966fa7f7..e17e2956c4c3b68546428dbbf686e65002983b1d 100644 (file)
--- a/core/display.js
+++ b/core/display.js
@@ -746,12 +746,18 @@
             this._renderQ.push(action);
             if (this._renderQ.length === 1) {
                 // If this can be rendered immediately it will be, otherwise
-                // the scanner will start polling the queue (every
-                // requestAnimationFrame interval)
+                // the scanner will wait for the relevant event
                 this._scan_renderQ();
             }
         },
 
+        _resume_renderQ: function() {
+            // "this" is the object that is ready, not the
+            // display object
+            this.removeEventListener('load', this._noVNC_display._resume_renderQ);
+            this._noVNC_display._scan_renderQ();
+        },
+
         _scan_renderQ: function () {
             var ready = true;
             while (ready && this._renderQ.length > 0) {
@@ -776,6 +782,8 @@
                         if (a.img.complete) {
                             this.drawImage(a.img, a.x, a.y);
                         } else {
+                            a.img._noVNC_display = this;
+                            a.img.addEventListener('load', this._resume_renderQ);
                             // We need to wait for this image to 'load'
                             // to keep things in-order
                             ready = false;
@@ -787,10 +795,6 @@
                     this._renderQ.shift();
                 }
             }
-
-            if (this._renderQ.length > 0) {
-                requestAnimationFrame(this._scan_renderQ.bind(this));
-            }
         },
     };
 

diff --git a/tests/test.display.js b/tests/test.display.js
index 64932b10752ae39c71bc5a990f218ca5422e7afa..3c7a28fce9ac4a5d9b2bae04dbccb59b58d223a4 100644 (file)
--- a/tests/test.display.js
+++ b/tests/test.display.js
@@ -384,11 +384,6 @@ describe('Display/Canvas Helper', function () {
             display = new Display({ target: document.createElement('canvas'), prefer_js: false });
             display.resize(4, 4);
             sinon.spy(display, '_scan_renderQ');
-            this.old_requestAnimationFrame = window.requestAnimationFrame;
-            window.requestAnimationFrame = function (cb) {
-                this.next_frame_cb = cb;
-            }.bind(this);
-            this.next_frame = function () { this.next_frame_cb(); };
         });
 
         afterEach(function () {
@@ -407,7 +402,7 @@ describe('Display/Canvas Helper', function () {
         });
 
         it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
-            var img = { complete: false };
+            var img = { complete: false, addEventListener: sinon.spy() }
             display._renderQ = [{ type: 'img', x: 3, y: 4, img: img },
                                 { type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
             display.drawImage = sinon.spy();
@@ -416,11 +411,13 @@ describe('Display/Canvas Helper', function () {
             display._scan_renderQ();
             expect(display.drawImage).to.not.have.been.called;
             expect(display.fillRect).to.not.have.been.called;
+            expect(img.addEventListener).to.have.been.calledOnce;
 
             display._renderQ[0].img.complete = true;
-            this.next_frame();
+            display._scan_renderQ();
             expect(display.drawImage).to.have.been.calledOnce;
             expect(display.fillRect).to.have.been.calledOnce;
+            expect(img.addEventListener).to.have.been.calledOnce;
         });
 
         it('should draw a blit image on type "blit"', function () {