Jquery promise实现一张一张加载图片

下面是详细讲解“Jquery promise实现一张一张加载图片”的完整攻略：

什么是Promise

Promise是JavaScript中一种处理异步操作的方式，它代表了一种容器，里面保存着某个未来才会结束的事件（通常是一个异步操作），并提供了一种可规范的方式来处理这个事件的结果。

怎样实现一张一张加载图片

我们可以使用jQuery的$.Deferred对象和$.when()方法来实现一张一张地加载图片。

首先，我们需要准备一个图片数组，如下：

var imgs = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];

然后，我们可以通过循环来遍历数组，并向页面中添加图片：

$.each(imgs, function(index, value) {
  var img = new Image();
  img.onload = function() {
    $(this).appendTo('#images');
  };
  img.src = value;
});

这里，我们使用了JavaScript的Image对象来加载图片。当图片加载完成后，我们使用jQuery的appendTo()方法将其添加到页面中。

但是，上面的代码中存在一个问题：如果图片加载过慢或者网络出现问题，就会导致页面长时间没有响应。这时，我们可以使用Promise来解决这个问题。

具体地，我们可以将每张图片的加载封装为一个Promise对象，并使用$.when()方法来等待所有Promise对象都执行完毕后再将其添加到页面中。

下面是代码示例：

var imgs = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
var promises = [];

$.each(imgs, function(index, value) {
  var img = new Image();
  var deferred = $.Deferred();

  img.onload = function() {
    deferred.resolve(img);
  };

  img.onerror = function() {
    deferred.reject();
  };

  img.src = value;
  promises.push(deferred.promise());
});

$.when.apply($, promises).done(function() {
  var args = arguments;
  $.each(args, function(index, value) {
    $(value).appendTo('#images');
  });
});

上面的代码中，我们将所有Promise对象保存到一个数组promises中，然后使用$.when()方法等待它们都执行完毕。当所有Promise对象都执行完毕后，$.when()方法会触发.done()回调函数，并将所有Promise对象的返回值传递给它。因为每个Promise对象的返回值都是对应的图片对象，所以我们可以使用$.each()方法将它们都添加到页面中。

另一个示例：

function loadImage(url) {
  var deferred = $.Deferred();
  var img = new Image();

  img.onload = function() {
    deferred.resolve(img);
  };

  img.onerror = function() {
    deferred.reject();
  };

  img.src = url;
  return deferred.promise();
}

var promises = [];
promises.push(loadImage('img/1.jpg'));
promises.push(loadImage('img/2.jpg'));
promises.push(loadImage('img/3.jpg'));

$.when.apply($, promises).done(function() {
  var args = arguments;
  $.each(args, function(index, value) {
    $(value).appendTo('#images');
  });
});

这里，我们封装了loadImage()函数来加载单张图片，并返回对应的Promise对象。然后，我们创建了三个Promise对象，并将它们保存到一个数组promises中，最后使用$.when()方法等待它们都执行完毕。

需要注意的是，要使用$.when()方法等待多个Promise对象时，需要使用$.apply()方法将Promise对象数组作为$.when()方法的参数传递进去。