我可以同步多个图像onload呼叫吗？ [英] Can I sync up multiple image onload calls?

问题描述

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

  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（）{...} 
  

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

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

解决方案

这个小提琴可能会有所帮助。这是一个简单的通用'加载程序'。

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

以及代码：

  // loader会通过为每个项目调用thingToDo来加载项目，
 //在完成所有事情之前调用allDone之前。 
函数加载器（items，thingToDo，allDone）{
 if（！items）{
 //无所事事。 
 return; 
 
 
 if（undefined=== items.length）{
 //将单个项目转换为数组。 
 items = [items]; 
} 
 
 var count = items.length; 
 
 //这个回调计算要做的事情。 
 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）; 
 
 
 
函数loadImage（items，i，onComplete）{
 var onLoad = function（e）{
 e.target.removeEventListener（ load，onLoad）; 
 
 //下一行可以被删除。 
 //只在这里证明图像已加载。 
 document.body.appendChild（e.target）; 
 
 //通知我们完成了。 
 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）; 
}）; 
  

I want a function to run when specific images are loaded, but I don't know how to wait for both to load before running. I only know how to chain them, like below:

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

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

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

The downside to this is it has to wait till Image1 completely loads before getting the second. I want to try something like this:

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

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

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

EDIT: Thank you both for the help Paul Grime and ziesemer. Both your answers are very good. I think I have to give the best answer to Paul Grime, although his uses more code, I only need to know the src of the images and the onload function is built in while in ziesemer's answer I need to know both the src, the count of the images, and have to write multiple onload lines.

Depending on the situation, both have their purpose. Thank you both for the help.

解决方案

This fiddle might help. It's a simple generic 'loader'.

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

And the code:

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

这篇关于我可以同步多个图像onload呼叫吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！