Question

我有一个Javascript Map工具包，它使用Image对象来加载图像。每次移动/调整地图大小时，它都会加载许多图像。但我想知道在执行移动/调整大小操作后加载所有图像时如何触发函数。

有没有办法可以创建像“allimages.onload = function（）{}”这样的监听器？

或者有任何解决方法吗？

Answer 1

您必须保持尚未加载的图像数量，并在未完成图像数达到0时调用最终函数。例如

function nofunction() {}

function loadImages(srcs, callback) {
    var images= [];
    var imagen= srcs.length;
    for (var i= 0; i<srcs.length; i++) {
        var image= new Image();
        image.onload=image.onerror= function() {
            imagen--;
            if (imagen==0) {
                this.onload=this.onerror= nofunction;
                callback();
            }
        };
        image.src= srcs[i];
        images.push(image);
    }
    return images;
}

...

var images= loadImages(['/img/1.gif', '/img/2.gif'], function() {
    alert('yay');
});

for (var i= 0; i<images.length; i++)
    mapelement.appendChild(images[i]);

Answer 2

前段时间我写了关于检测单个图像负载的a blog post。您可以使用该示例构建检查是否已加载所有图像的函数。我希望它会有所帮助。

我怎么知道加载了一批图像？

2 个答案: