你应该会用事件加回调的办法来处理这类情况：

 

var img1 = document.querySelector('.img-1');

img1.addEventListener('load', function() {

  // 啊哈图片加载完成

});

img1.addEventListener('error', function() {

  // 哎哟出问题了

});

 

这样就不打喷嚏了。我们添加几个监听函数，请求图片，然后 JavaScript 就停止运行了，直到触发某个监听函数。

上面的例子中唯一的问题是，事件有可能在我们绑定监听器之前就已经发生，所以我们先要检查图片的“complete”属性：

 

var img1 = document.querySelector('.img-1');

function loaded() {

  // 啊哈图片加载完成

}

if (img1.complete) {

  loaded();

}

else {

  img1.addEventListener('load', loaded);

}

img1.addEventListener('error', function() {

  // 哎哟出问题了

});

 

这样还不够，

如果在添加监听函数之前图片加载发生错误，我们的监听函数还是白费，不幸的是 DOM 也没有为这个需求提供解决办法。而且，这还只是处理一张图片的情况，如果有一堆图片要处理那就更麻烦了。

 

事件机制最适合处理同一个对象上反复发生的事情—— keyup、touchstart 等等。你不需要考虑当绑定监听器之前所发生的事情，当碰到异步请求成功/失败的时候，你想要的通常是这样：

img1.callThisIfLoadedOrWhenLoaded(function() {

  // 加载完成

}).orIfFailedCallThis(function() {

  // 加载失败

});

 

// 以及……

whenAllTheseHaveLoaded([img1, img2]).callThis(function() {

  // 全部加载完成

}).orIfSomeFailedCallThis(function() {

  // 一个或多个加载失败

});

这就是 Promise。如果 HTML 图片元素有一个“ready()”方法的话，我们就可以这样：

 

img1.ready().then(function() {

  // 加载完成

}, function() {

  // 加载失败

});

 

// 以及……

Promise.all([img1.ready(), img2.ready()]).then(function() {

  // 全部加载完成

}, function() {

  // 一个或多个加载失败

});

基本上 Promise 还是有点像事件回调的，除了：

 

一个 Promise 只能成功或失败一次，并且状态无法改变（不能从成功变为失败，反之亦然）

如果一个 Promise 成功或者失败之后，你为其添加针对成功/失败的回调，则相应的回调函数会立即执行

这些特性非常适合处理异步操作的成功/失败情景，你无需再担心事件发生的时间点，而只需对其做出响应。

 

一个 Promise 的状态可以是：

肯定（fulfilled） 该 Promise 对应的操作成功了 

否定（rejected） 该 Promise 对应的操作失败了 

等待（pending） 还没有得到肯定或者否定结果，进行中 

结束（settled） 已经肯定或者否定了

规范里还使用 thenable 来描述一个对象是否是“类 Promise”（拥有名为“then”的方法）的。这个术语使我想起来前英格兰足球经理 Terry Venables 所以我尽量少用它。