加载处理程序和 src 集的顺序在脚本元素中是否重要

Question

来自这个答案，它说：

您应该在onload事件之后设置 src 属性，f.ex：

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

在附加 onload 事件之前，还应将脚本追加到 DOM：

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

请记住，您需要检查readystate以获取IE支持。如果你使用的是jQuery，你也可以尝试getScript()方法：http://api.jquery.com/jQuery.getScript/

我怀疑这

是否是这个问题的正确答案。

那么，设置处理程序和src onload顺序如此重要吗？我认为它们会立即由浏览器进行评估，因此我认为两者之间没有区别：

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

和

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

我说的对吗？

Answer 1

'el' 已经是你直播 DOM 的一部分了吗？如果是这样，当您更改其 onload 事件处理程序时，将不会评估其内容（因为已发生 load 事件）。

el.onload = function（） {//...

如果 el 尚未添加到页面中，例如，如果您正在构建视图，并且在设置所有内容后将被注入到页面中，那么是的，当它添加到页面时，将触发它的加载事件。

谨慎对待"src"中可能的内容可能取决于"onload"中发生的事情。

Answer 2

@thinkbigthinksmall是对的。

我要补充一点，这种行为是特定于webkit的，Firefox 会将事件处理程序排队，所以在这种情况下这无关紧要。

我不确定规格对此有何说明，但 IMM FF 行为是正确的。

无论如何，由于 webkit 的行为是这样的，因此应该始终在声明 onload 事件后设置 src，否则，缓存的媒体将在脚本解析之前触发 onload 事件。

不过，一种解决方法是在声明 onload 事件后再次设置 src：

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

这样，您确定将触发 onload 事件。此外，应该发出单个请求，因为第一个请求将被缓存。