15

Coming from this answer that says:

You should set the src attribute after the onload event, f.ex:

el.onload = function() { //...
el.src = script;

You should also append the script to the DOM before attaching the onload event:

$body.append(el);
el.onload = function() { //...
el.src = script;

Remember that you need to check readystate for IE support. If you are using jQuery, you can also try the getScript() method: http://api.jquery.com/jQuery.getScript/

I am skeptical about believing that this would be the correct answer to the question.

So, is the order of setting onload handler and src so important? I think they are evaluated by browser instantly so I think that there is no difference between:

el.onload = function() { //...
el.src = script;

and

el.src = script;
el.onload = function() { //...

Am I right?

Community
  • 1
  • 1
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • 1
    I dont think the order is important. Even if the image is loaded from cache instantly, the onload callback will only get queued, since js doesnt do multi threaded exec, right? – z33m Jan 19 '14 at 08:12
  • 1
    I'd guess if the JS took a pee break, onload might be missed. – bjb568 Jan 19 '14 at 08:12
  • @z33m unfortunately not right... webkit browsers will make the onload event synchronously fires (it fires in the flow as soon as possible). I'm not sure it's a bug per specs (couldn't find it) but FF does queue the event handler, and if specs don't tell to do so, I'd think it's a bug in specs. But anyway, since this behavior exists in webkit, one should always set the src after the onload handler has been declared. – Kaiido Jul 26 '16 at 02:06
  • That precaution would only be true on `img` elements. `script` elements don't get pre-loaded like `img` elements do. – Bekim Bacaj Jul 26 '16 at 03:11
  • @BekimBacaj, unless you set their `async` attribute yes. Still true for other media elements (audio, video, object, iframe, embed, SVGImage ...). – Kaiido Jul 26 '16 at 05:45
  • The async of defer attributes of a script have no bearing in dynamically ingested script elements. The op question is specific. – Bekim Bacaj Jul 26 '16 at 22:47

2 Answers2

3

Is 'el' already part of your live DOM? If so, when you change its onload event handler, it's contents will not be evaluated (because the load event already occurred).

el.onload = function() { //...

If el is not already added to the page, for instance if you're building a view, and will be injected into the page when everything is set, then yes it's load event will be fired when it's added to the page.

Be cautious about what might in the 'src' might depend on what happened in 'onload'.

thinkbigthinksmall
  • 894
  • 5
  • 10
  • 19
3

@thinkbigthinksmall is right.

I would add that this behavior is webkit specific, Firefox will queue the event handler, so in this case it wouldn't matter.

I am not sure what the specs do say about it, but IMM FF behavior is the correct one.

Anyway, since webkit behaves like that, one should always set the src after the onload event has been declared, otherwise, cached media will fire the onload event before your script has been parsed.

One workaround though is to set your src again after the onload event has been declared : 

<img src="someCachedMedia.ext" id="img"/>
<script>
  img.onload = doStuff;
  img.src = img.src; // force the onload to fire again
</script>

This way, you're sure the onload event will fire. Also, a single request should be made, since the first one will be cached.

Kaiido
  • 123,334
  • 13
  • 219
  • 285