Determine when an image has loaded in svg with RaphaelJS

Question

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:

var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});

and:

$('image').on('load')  

all to no avail. I've also used "onload" and "onsvgload" none of which work.

Is there away to determine if an svg image has actually loaded?

I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image); ie:

var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
    image.path = preload.src;
    //Now load image in raphael - except this still forces the browser to make another call for the image
});

Any ideas?

Answer 1

Using the onLoad event handler works, with one additional line of code:

var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
    console.log("image is loaded!");
})

You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired