我可以同步多个图像加载调用吗？

Question

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

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 和 ziesemer 的帮助。你的两个答案都很好。我想我必须给 Paul Grime 最好的答案，虽然他使用了更多的代码，但我只需要知道图像的 src 和内置的 onload 功能，而在 ziesemer 的回答中，我需要知道 src，计数的图像，并且必须编写多个 onload 行。

根据情况，两者都有其目的。谢谢两位的帮助。

Answer 1

如果您不能使用 jQuery 之类的东西，请创建一个辅助函数，您可以将它传递给您感兴趣的所有图像的 onload。每次调用它时，增加一个计数器，或添加 @987654322 @name 到一个集合。一旦计数器或您的集合达到您期望的所有图像的大小，您就可以开始您真正想做的任何工作。

类似：

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;

Answer 2

我采用了上面 Paul Grime 的示例并将其修改为更易于理解，同时仍然满足 OP 需求。我觉得这里的其他答案要么太复杂，要么不够。希望这段代码更容易获取和输入。我在每个循环中使用了下划线，但这很容易更改。

另外，我现在改进了解决方案，以便对 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"]);
    });
},

Answer 3

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

http://jsfiddle.net/8baGb/1/

还有代码：

// 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");
});