Является ли порядок обработчика onload и src важным в элементе script?

Прибыв из этого ответа, в котором говорится:

Вы должны установить атрибут src после события onload, f.ex:
el.onload = function() { //...
el.src = script;
Вы также должны добавить script в DOM до с событием onload:
$body.append(el);
el.onload = function() { //...
el.src = script;
Помните, что вам нужно проверить readystate на поддержку IE. Если вы используете jQuery, вы также можете попробовать метод getScript(): http://api.jquery.com/jQuery.getScript/

Я скептически отношусь к мнению, что это будет правильным ответом на вопрос.

Итак, так ли порядок настройки обработчика onload и src так важен? Я думаю, что они мгновенно оцениваются браузером, поэтому я думаю, что нет никакой разницы между:

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

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

Я прав?

Ответ 1

Является ли "el" уже частью вашей живой DOM? Если это так, когда вы меняете обработчик события onload, это содержимое не будет оцениваться (потому что событие загрузки уже произошло).

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

Если el еще не добавлен на страницу, например, если вы создаете представление и будете введены на страницу, когда все будет установлено, тогда да, это событие загрузки будет запущено, когда оно будет добавлено на страницу.

Будьте осторожны в отношении того, что может быть в "src", может зависеть от того, что произошло в "onload".

Ответ 2

@thinkbigthinksmall - это правильно.

Я бы добавил, что это поведение специфично для webkit, Firefox будет помещать в очередь обработчик событий, поэтому в этом случае это не имеет значения.

Я не уверен, что говорят о ней спецификации, но поведение IMM FF является правильным.

В любом случае, поскольку webkit ведет себя так, всегда нужно установить src после объявления события onload, иначе кэшированный носитель будет запускать событие onload перед тем, как ваш script будет обработан.

Одним из способов решения этой проблемы является установка вашего src снова после объявления события onload:

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

Таким образом, вы уверены, что событие onload будет срабатывать. Кроме того, должен быть сделан один запрос, поскольку первый будет кэшироваться.