Is the order of onload handler and src set important in a script element?

Question

Coming from this answer that says:

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

Answer 1

@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.

Answer 2

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'.