Determine when an image uploaded to svg using RaphaelJS

Question

I am trying to determine how to determine when an svg image is loaded in a browser. I am using Raphael JS and I have 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 also used onload and onsvgload, none of which work.

Is it possible to determine if the svg image is really uploaded?

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

 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 can read more about this: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired