资源加载：onload 和 onerror

原文链接：http://javascript.info/onload-onerror，translate with ❤️ by zhangbao.

浏览器允许跟踪外部资源的加载——可以是脚本、iframe 或图片等。

有两个事件会发生：

• onload——加载成功，

• onerror——加载出错。

加载脚本

假设我们需要调用外部脚本中的函数。

我们可以像这样动态加载：

let script = document.creatElement('script');
script.src = 'my.js';
document.head.append(script);

但是如何运行这个脚本中声明的函数呢？我们需要等到脚本加载完成，才可以调用。

script.onload

主要的帮手是 load 事件，它在脚本加载并且执行之后触发。

例如：

let script = document.creatElement('script');
// 可以从任何域名里加载任何脚本
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js';
document.head.append(script);
script.onload = function() {
  // 脚本加载完毕后，就可以使用 Lodash 声明的函数“_”了 
  alert(_);
};

在 onload 中，我们可以使用脚本变量，执行脚本函数等。

但是，如果加载失败了怎么办？例如，脚本不存在（404 错误）或服务器宕机了（不可用）。

script.onerror

加载（而非执行）期间发生的错误可以使用 error 事件跟踪。

例如，我们请求一个不存在的脚本：

let script = document.createElement('script');
script.src = "https://example.com/404.js"; // 没有这个脚本
document.head.append(script);
script.onerror = function() {
  console.log("加载出错 " + this.src); // 加载出错 https://example.com/404.js
};

需要注意的是，这里不能得到错误细节。我们不知道是 404 还是 500 什么错误，只知道是加载失败了。

其他资源

load 和 error 事件在其他外部资源上同样有效。不过，可能会有一些细微差别。

例如：

**、<link>**（外部样式）

load 和 error 都能按照预期触发。