diff --git a/examples/network/nodeStyles/circularImages.html b/examples/network/nodeStyles/circularImages.html index 95fcbe3b..6e2ce27e 100644 --- a/examples/network/nodeStyles/circularImages.html +++ b/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 diff --git a/lib/network/Images.js b/lib/network/Images.js index a7354fae..25e5536d 100644 --- a/lib/network/Images.js +++ b/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;