diff --git a/core/display.js b/core/display.js index 938bb895..e17e2956 100644 --- 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 64932b10..3c7a28fc 100644 --- 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 () {