我可以同步多个图像上传呼叫吗？

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,count的图像,必须写多个上传线.

根据具体情况,两者都有其目的.谢谢你们的帮助.

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;