Fixed issue where broken images wouldn't always be rendered.

examples/network/nodeStyles/circularImages.html

@@ -45,7 +45,8 @@
         {id: 12, shape: 'circularImage', image: DIR + '12.png'},
         {id: 13, shape: 'circularImage', image: DIR + '13.png'},
         {id: 14, shape: 'circularImage', image: DIR + '14.png'},
-        {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
+        {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
+        {id: 16, shape: 'circularImage', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
       ];
 
       // create connections between people
@@ -64,7 +65,8 @@
         {from: 10, to: 11},
         {from: 11, to: 12},
         {from: 12, to: 13},
-        {from: 13, to: 14}
+        {from: 13, to: 14},
+		{from: 9, to: 16}
       ];
 
       // create a network

lib/network/Images.js

@@ -15,58 +15,54 @@ function Images(callback) {
  * @param {string} url          Url of an image to use if the url image is not found
  * @return {Image} img          The image object
  */
-Images.prototype.load = function(url, brokenUrl, id) {
-  var img = this.images[url]; // make a pointer
-  if (img === undefined) {
-    // create the image
+Images.prototype.load = function (url, brokenUrl, id) {
     var me = this;
-    img = new Image();
-    img.onload = function () {
-      // IE11 fix -- thanks dponch!
-      if (this.width === 0) {
-        document.body.appendChild(this);
-        this.width = this.offsetWidth;
-        this.height = this.offsetHeight;
-        document.body.removeChild(this);
-      }
-
-      if (me.callback) {
-        me.images[url] = img;
-        me.callback(this);
-      }
-    };
-
-    img.onerror = function () {
-      if (brokenUrl === undefined) {
-        console.error("Could not load image:", url);
-        delete this.src;
-        if (me.callback) {
-          me.callback(this);
+    
+    function addImageToCache(imageToCache) {
+        // IE11 fix -- thanks dponch!
+        if (imageToCache.width === 0) {
+            document.body.appendChild(imageToCache);
+            imageToCache.width = imageToCache.offsetWidth;
+            imageToCache.height = imageToCache.offsetHeight;
+            document.body.removeChild(imageToCache);
         }
-      }
-      else {
-        if (me.imageBroken[id] && me.imageBroken[id][url] === true) {
-          console.error("Could not load brokenImage:", brokenUrl);
-          delete this.src;
-          if (me.callback) {
-            me.callback(this);
-          }
-        }
-        else {
-          console.error("Could not load image:", url);
-          this.src = brokenUrl;
-          if (me.imageBroken[id] === undefined) {
-            me.imageBroken[id] = {};
-          }
-          me.imageBroken[id][url] = true;
+    
+        me.images[url] = imageToCache;
+    }
+    
+    function redrawWithImage(imageToRedrawWith) {
+        if (me.callback) {
+            me.callback(imageToRedrawWith);
         }
-      }
+    }
+    
+    function tryloadBrokenUrl(imageToLoadBrokenUrlOn) {
+        if (brokenUrl === undefined) return;
+    
+        imageToLoadBrokenUrlOn.onerror = function() {
+            console.error("Could not load brokenImage:", brokenUrl);
+            addImageToCache(new Image());
+        };
+        imageToLoadBrokenUrlOn.src = brokenUrl;
+    }
+    
+    var cachedImage = this.images[url]; 
+    if (cachedImage) return cachedImage;
+    
+    var img = new Image();
+    img.onload = function() {
+        addImageToCache(img);
+        redrawWithImage(img);
     };
-
+    
+    img.onerror = function () {
+        console.error("Could not load image:", url);
+        tryloadBrokenUrl(img);
+    }
+    
     img.src = url;
-  }
-
-  return img;
+    
+    return img;
 };
 
 module.exports = Images;