CODEWITHSUNDEEP
javascriptjqueryobjectload
ivkremer
ivkremer

Reputation: 1275

load method jQuery and native JavaScript

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.

Upvotes: 2

Views: 569

Answers (2)

JNDPNT
JNDPNT

Reputation: 7465

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.

Upvotes: 2

Lukas
Lukas

Reputation: 7734

try something like that 

var element = $("<object/>");
    element.load(function () {
)};

Upvotes: -1

Related Questions