How do I run a Javascript function when the content of an <object> has been loaded? The DOMContentLoaded event fires before that, and things that rely on it like JQuery's $() likewise.

Compare this to this. The first example fails because the function is executed when the external SVG hasn't been loaded. The second example polls for the elements it wants to change and only then executes the relevant code, and succeeds.

Polling works in practice, but is there a better solution for this? Ideally there would be an event fired that I can use.

How do I run a Javascript function when the content of an <object> has been loaded? The DOMContentLoaded event fires before that, and things that rely on it like JQuery's $() likewise.

Compare this to this. The first example fails because the function is executed when the external SVG hasn't been loaded. The second example polls for the elements it wants to change and only then executes the relevant code, and succeeds.

Polling works in practice, but is there a better solution for this? Ideally there would be an event fired that I can use.

• javascript
• dom
• dom-events

Share Improve this question Follow edited Jul 22, 2022 at 22:00 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 27, 2013 at 15:42 Lars KotthoffLars Kotthoff 109k1616 gold badges210210 silver badges208208 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Does using the onload DomEvent work?

<object onload="changeColor()" data="circles.svg" type="image/svg+xml" id="circles"></object>

see my it here

You should use onload/ready event of jquery - http://api.jquery./ready/

$('#circles').ready(function(){
    changeColor();
});`