Javascript 我可以同步多个图像加载呼叫吗？

我希望在加载特定图像时运行一个函数，但我不知道如何在运行之前等待加载这两个图像。我只知道如何链接它们，如下所示：

Image1 = new Image();
Image1.src = 'image1-link.jpg';

Image2 = new Image();
Image2.src = 'image2-link.jpg';

Image1.onload = function() {
    Image2.onload = function() { ... }
}

这样做的缺点是，必须等到Image1完全加载后才能获得第二个。我想试试这样的东西：

Image1 = new Image();
Image1.src = 'image1-link.jpg';

Image2 = new Image();
Image2.src = 'image2-link.jpg';

(Image1 && Image2).onload = function() { ... }

编辑：感谢保罗·格里姆和齐塞默的帮助。你的两个答案都很好。我想我必须给Paul Grime一个最好的答案，虽然他使用了更多的代码，但我只需要知道图像的src和onload函数是内置的，而在ziesemer的答案中，我需要知道src和图像的计数，并且必须编写多个onload行

---

视情况而定，两者都有各自的目的。谢谢你们两位的帮助。

如果您不能使用jQuery之类的工具，请创建一个帮助函数，您可以将它传递给您感兴趣的所有图像的

onload

。每次调用时，递增一个计数器，或将

src

名称添加到集合中。一旦计数器或您的设置达到您期望的所有图像的大小，那么您就可以启动任何您真正想做的工作

比如：

var imageCollector = function(expectedCount, completeFn){
  var receivedCount;
  return function(){
    if(++receivedCount == expectedCount){
      completeFn();
    }
  };
}();

var ic = imageCollector(2, function(){alert("Done!");});
Image1.onload = ic;
Image2.onload = ic;

---

这把小提琴可能有用。这是一个简单的通用“加载器”

以及守则：

// loader will 'load' items by calling thingToDo for each item,
// before calling allDone when all the things to do have been done.
function loader(items, thingToDo, allDone) {
    if (!items) {
        // nothing to do.
        return;
    }

    if ("undefined" === items.length) {
        // convert single item to array.
        items = [items];
    }

    var count = items.length;

    // this callback counts down the things to do.
    var thingToDoCompleted = function (items, i) {
        count--;
        if (0 == count) {
            allDone(items);
        }
    };

    for (var i = 0; i < items.length; i++) {
        // 'do' each thing, and await callback.
        thingToDo(items, i, thingToDoCompleted);
    }
}

function loadImage(items, i, onComplete) {
    var onLoad = function (e) {
        e.target.removeEventListener("load", onLoad);

        // this next line can be removed.
        // only here to prove the image was loaded.
        document.body.appendChild(e.target);

        // notify that we're done.
        onComplete(items, i);
    }
    var img = new Image();
    img.addEventListener("load", onLoad, false);
    img.src = items[i];
}

var items = ['http://bits.wikimedia.org/images/wikimedia-button.png',
             'http://bits.wikimedia.org/skins-1.18/common/images/poweredby_mediawiki_88x31.png',
             'http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png',
             'http://upload.wikimedia.org/wikipedia/commons/3/38/Icons_example.png'];

loader(items, loadImage, function () {
    alert("done");
});

//加载程序将通过为每个项目调用thingToDo来“加载”项目，
//在所有要做的事情都完成后调用allDone之前。
函数加载器（项目、待办事项、全部完成）{
如果（！项）{
//无事可做。
返回；
}
如果（“未定义”==items.length）{
//将单个项转换为数组。
项目=[项目]；
}
var count=items.length；
//这个回调会倒计时要做的事情。
var thingToDoCompleted=函数（项，i）{
计数--；
如果（0==计数）{
全部完成（项目）；
}
};
对于（变量i=0；i

我以保罗·格里姆（Paul Grime）的例子为例，对其进行了修改，使其更易于理解，同时仍能满足操作需求。我觉得这里的其他答案要么复杂，要么不够。希望这段代码更容易获取和输入。我在每个循环中使用下划线，但这很容易更改

此外，我现在改进了解决方案，使其具有针对img错误的回调。如果已加载映像，则会将其添加到阵列中，如果映像失败，则不会添加到阵列中。我还将其更改为使用jquery

var loadedImages = [],
    imagePaths = [{"src": "myimg.png"}, {"src": "myotherimg.png"}];

loadImages(imagePaths, loadedImages, function(loadedImages) {
    console.log(loadedImages)
});

function loadImages(imagePaths, loadedImages, callback) {
    if (!imagePaths) { return; }

    var count = imagePaths.length;

    _.each(imagePaths, function(data, key, list) {
        var onLoad = function (e) {
            count--;
            if (0 == count) {
                callback(loadedImages);
            }
        }

        $(document.createElement("img"))
            .on('load', function() {  
                loadedImages.push(data);
                onLoad();
            })
            .on('error', function() {  onLoad(); })
            .attr("src", data["src"]);
    });
},

---

是的，jQuery是可用的