Adding addEventListener('load', func) on an already loaded element

Question

I need to check if an OBJECT-tag is loaded and in some edge cases the OBJECT is loaded before the JavaScript is run and then my function will never fire.

<object type="image/svg+xml" data="svg/europas-ledande-online-butik.svg">Europas ledande online butik</object>
obj.addEventListener('load', function svgLoad() {..

How can I check if my OBJECT is loaded already? I COULD do: object onload="store some global variable" and later check for it ,but that's clunky and ugly.

I CAN'T check the width or the height, because I don't know the values (it's added thru a CMS)

Ideas?

The example above just so happens to be an SVG, but it can be any element with an additional external data request - object, image, embed what ever.

As stated above: ONLOAD is not something I wish to do (separation of concerns - inline event handlers are bad for you) and addEventListener doesn't work on elements that are already loaded.

Of course I wish to trigger my svgLoad-function ASAP - as soon as the objects are ready to be shown.

possible duplicate of [How to check if an embedded SVG document is loaded in an html page?](http://stackoverflow.com/questions/337293/how-to-check-if-an-embedded-svg-document-is-loaded-in-an-html-page) — Madness, Aug 11 '15 at 20:36
Not really. In this particular case I happen to load an SVG but the question applies to any element. — jBoive, Aug 11 '15 at 20:50
[This answer (not the accepted one, but highest voted)](http://stackoverflow.com/a/3510578/2940627) should work for any. Did you try it? — Madness, Aug 11 '15 at 20:52
As I write in my question: "I COULD do: object onload="store some global variable" and later check for it. But that's clunky and ugly." — jBoive, Aug 11 '15 at 20:53
and using addEventListener doesn't work on already loaded, as stated in the question. — jBoive, Aug 11 '15 at 20:53
Its quite confusing, If it is loaded, you dont need to check if it is loaded. If you need to know, and dont, you set a variable. IsLoadedAfterTheFact() ehhhhh. — Madness, Aug 11 '15 at 20:56
Yes I do. When it's loaded I wish to trigger an animation - but that's totally irrelevant. I need to know, that's all you need to know. If you don't have anything to contribute, please refrain from commenting. — jBoive, Aug 11 '15 at 20:59
Hm, people let you know so quickly the kinds of people they are, don't they? That attitude is why you do not want to use the correct solution, I am simply trying to help. Don't get agitated. Anyways back to spending my time helping you... if you are doing it once its loaded, the solution is in that other answer. If you are delaying it to some point in the future, you set a variable. Getting snippy with me does not change that. — Madness, Aug 11 '15 at 21:05
Look, I've been doing this for more then 20 years. It's quite annoying when what used to be a good source of information now a days is overrun with people fishing for StackOverflow Stats and don't really know what they talk about, or bother reading the question properly. I appreciate that you're trying to help, but reserve myself from your assistance as your advice doesn't help and isn't relevant to the question. If you understod the problem you would see this for yourself. — jBoive, Aug 11 '15 at 21:18
I have been in the game the same amount of time, yet for me, with age came maturity otherwise this would be a public shaming right now frankly. If I cared about stats I would have just answered the question, not tried to nudge you back into the correct direction with comments like so many of us try to do when we see fawns so astray. The lack of traffic and answers on your post are indicative of that. Be well, and good luck. — Madness, Aug 11 '15 at 21:32
No, promises are mainly for async requests - like an AJAX request. There are no way to use promises in this context. — jBoive, Aug 13 '15 at 19:49

score 0 · Accepted Answer · answered Aug 13 '15 at 20:04

This is what I ended up doing:

<object class="slide visuallyhidden" onload="this.setAttribute('data-is-loaded', 'true')" type="image/svg+xml" data="svg/europas-ledande-online-butik.svg">Europas ledande online butik</object>

.

onload="this.setAttribute('data-is-loaded', 'true')"

Yes, it's an inline event handler - but in this case it doesn't do anything outside it's own element. It's not ideal, but it will have to do.

I could set a class, but I opted not to. This way is more semantic and setAttribute has great browser support (all the way back to DOM Core 1 witch includes IE5 at least) and is very efficient.

The only problem now is that onload for an SVG, embedded using the OBJECT element, doesn't seem to bother with including linked backgrounds. Meaning that onload may be triggered before any linked backgrounds are downloaded.

Adding addEventListener('load', func) on an already loaded element

1 Answers1