SVG onload event called too early?

Question

I have code like this, using jQuery-svg

function replaceRaster(){
    $('#png').remove()
    a = $('#graphic')
    b = a.svg(a)
    a.load('IDC_Energy.svg',
         {onLoad:bind} )
   svg = document.getElementById("graphic").children[0]
   console.log(svg)
   svg.addEventListener('load', bind)
}

The event handler, bind, is fired before jQuery-svg-dom is able to select elements within the SVG data. My code is supposed to look over the SVG and assign various classes and attach listeners to various elements, but it's not able to find any. If I call bind in the console after everything is loaded it can find alll the SVG elements.

Am I doing something wrong? Is there another way to detect when the SVG DOM is available? I've thought of using a timer, but that's really hacky, especially considering my SVG files could be a few MB large.

score 0 · Answer 1 · answered Jul 11 '12 at 11:53

0

Have you tried using a timer with a timer delay of '0' or perhaps just '10'? I've frequently used this technique to push the work out of the current run loop as timers are fired after the redraw ghas completed. With luck the bind will only be fired once the repaint has finished. I'm not sure whether this will help in your particular instance because I don't know what else you are doing in the page - it won't help, for example, if you have some asynchronous data handling going on.

answered Jul 11 '12 at 11:53

Purpletoucan

6,472
2
21
28

1

The page is loading the SVG data asynchronously, yes. I ended up using a loop to check if the content is ready every 50ms or something (forgot now). – Hilton Shumway Jul 12 '12 at 22:16

SVG onload event called too early?

1 Answers1