设置 <img> 和 <script> 的 src 的不同行为答案

【问题标题】：Different behaviour on setting the src of an <img> and a <script>设置 <img> 和 <script> 的 src 的不同行为
【发布时间】：2015-12-25 12:24:45
【问题描述】：

如果您设置分支新img 元素（或Image 对象）的src 属性，浏览器会为您获取该图像并在某个时候触发onload 事件。然而，这似乎不适用于script 元素。脚本在附加到文档后才会加载，这也会触发脚本的执行。我找不到关于这种行为的文档，我想知道这是否是标准的东西。我还想知道有什么方法可以说服script 表现得像img。

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-2.1.4.js';
script.onload = function () { console.log('script loaded'); }


var img = document.createElement('img');
img.src = 'http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg';
img.onload = function () { console.log('image loaded'); }

只有加载的图像会在控制台中打印。

【问题讨论】：

差异困扰着您吗？或者有什么具体的事情你正在尝试做但正在挣扎？至于当前的行为，我不确定它是否记录在案，但它是已知的行为。
一个主要原因是在附加到 DOM 之前无法执行，因为它可能依赖于 DOM 引用。此外，可能会有对日期/时间的调用，这些调用对插入时间很敏感，如果预取并执行，则会关闭。
@scunliffe：当然，预取可能与执行是分开的（就图像而言，它与显示是分开的）。
@Bergi true 我想它可以被下载但不执行（还）。我不确定设置async 属性是否会启用它？

标签： javascript dom script-tag

【解决方案1】：

我能想到的只是使用例如window.fetch()（旧版浏览器需要 polyfill）用于预取内容：

window.fetch('//code.jquery.com/jquery-2.1.4.js')
.then(function(res) { return res.status;})
.then(function(status) {
  if (status === 200) {
    console.log('ready');
  }
});

【讨论】：