Append promise of image loading to the plot api so it can wait for it

Author: antoinerg

src/traces/image/plot.js

@@ -155,7 +155,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
         image3
             .attr('style', 'image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;');
 
-        new Promise(function(resolve) {
+        var p = new Promise(function(resolve) {
             if(trace._isFromZ) {
                 resolve();
             } else if(trace._isFromSource) {
@@ -177,11 +177,9 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
                 var image = sel.node();
                 image.onload = function() {
                     context.drawImage(image, 0, 0);
-                    // we need to wait for the image to be loaded in order to redraw it from the canvas
-                    if(!fastImage) resolve();
+                    resolve();
                 };
                 sel.attr('xlink:href', trace.source);
-                if(fastImage) resolve();
             }
         })
         .then(function() {
@@ -208,5 +206,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
                 displayImage.attr('xlink:href', href);
             }
         });
+
+        gd._promises.push(p);
     });
 };

test/jasmine/tests/image_test.js

@@ -14,7 +14,6 @@ var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
 var supplyAllDefaults = require('../assets/supply_defaults');
 var Fx = require('@src/components/fx');
 var drag = require('../assets/drag');
-var delay = require('../assets/delay');
 
 var incompatibleUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15';
 
@@ -694,7 +693,6 @@ describe('image hover:', function() {
                 mockCopy.data[0].colormodel = 'rgba';
                 mockCopy.data[0].hovertemplate = '%{' + test[0] + '}<extra></extra>';
                 Plotly.newPlot(gd, mockCopy)
-                .then(delay(100)) // wait for the image to be loaded into canvas
                 .then(function() {_hover(205, 125);})
                 .then(function() {
                     assertHoverLabelContent({