Images: Return promise for image loading

Author: mdtusz

src/components/images/draw.js

@@ -85,7 +85,6 @@ module.exports = function draw(gd) {
         }
 
         thisImage.attr({
-            href: d.source,
             x: xPos,
             y: yPos,
             width: width,
@@ -95,6 +94,22 @@ module.exports = function draw(gd) {
         });
 
 
+        // Images load async so we must add the promise to the list
+        var imagePromise = new Promise(function(resolve) {
+
+            thisImage.on('load', resolve);
+            thisImage.on('error', function() {
+                thisImage.remove();
+                console.log('Image with source ' + d.source + ' could not be loaded.');
+                resolve();
+            });
+
+            thisImage.attr('href', d.source);
+        });
+
+        gd._promises.push(imagePromise);
+
+
         // Set proper clipping on images
         var xId = xref ? xref._id : '',
             yId = yref ? yref._id : '',