Question

I have an object tag on my page with SVG graphics in it:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />

I would like to execute some code which needs svg file to be completely loaded. So using jQuery I put:

$('#graphics').load(function() {
    // some code
})

And using native JavaScript I put:

$('#graphics')[0].addEventListener('load', function() {
    // some code
});

Now the second snippet works and the first does not. What do I miss here?
I supposed embed tag would provide another behavior but it seems there is no difference.

Answer 1

From the jQuery docs:

Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn’t work consistently nor reliably cross-browser

• It doesn’t fire correctly in WebKit if the image src is set to the same src as before

• It doesn’t correctly bubble up the DOM tree

• Can cease to fire for images that already live in the browser’s cache

AND:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.