How can I make sure that images are loaded before calling diagram.makeImage?

I have code that adds new nodes to my diagram and then creates a thumbnail image of the diagram. My nodes are in part made up of go.Pictures where the source property is bound to an svg file. I notice that sometimes after I add the node and the thumbnail image gets created, the thumbnail seems to have been generated before the svg picture has been rendered, so I have a hole in my thumbnail image. I have tried to pre-load the correct images from the server by

var img = new Image();
img.onload = image_loaded;
img.src = my_svg_url;

and wrapping those in promises to ensure that the thumbnail generation occurs after all the necessary images get loaded, but I still occasionally see a missing picture hole in my thumbnails. How can I guarantee that the images are loaded before I try to call makeImage?

A simple but naive way, you could create some kind of counter mechanism for unloaded images.

Every go.Picture with a source will fire the Picture.successFunction when it completes loading.

var someCounter = 5; // number of Pictures/ndoes total in Diagram you are loading, etc

// on every go.Picture with a unique source:
successFunction: function(picture) {
  someCounter--;
  // maybe do something with picture.source here
}

// before you make the thumbnail, see if someCounter === 0. Otherwise wait

As I said this is a fairly naive solution. You might want to make one where you keep a map of every image URL to-be-loaded, or at least do it by source URL instead of each picture, which involves checking just what got loaded in the success function.

Ah, thanks so much. I didn’t notice that successFunction in the docs, but I think that should do the job just fine.