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

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

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

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

Answer 2

如果您无法使用 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;

Answer 3

我采用了上面 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 4

浏览现有答案，我很惊讶没有人实现 基于 Promise 的解决方案在我看来是最优雅且最适合此类问题的解决方案，因此这里是一个：

// Example array of images
const imageUrls = [
  "https://en.wikipedia.org/static/images/project-logos/enwiki.png",
  "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
  "https://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png",
];

// imageUrls.map returns Promise array (because callback function is async), 
// which is immediately passed to Promise.all which accumulates them into one
// promise which will be resolved when all its elements will finish.
Promise.all(
  imageUrls.map(async (imageUrls, i) => {
    const tmpImage = new Image();
    
    // Create synchronization promise
    const syncPromise = new Promise((resolve) => {
    
      tmpImage.onload = (e) => {
        // Handle loaded image
        console.log("Finished loading image: ", i);
        
        // Don't forget to resolve syncPromise
        resolve(); 
      };
      
      tmpImage.src = imageUrls;
    });
    
    // Wait for syncPromise (image loaded)
    await syncPromise;
  })
).then(() => {
  console.log("Finished loading all images");
});