Javascript：如何在循环中获取卸载图像的高度？

Question

我正在加载一个json文件并将其解析为Javascript中的数组。 其中一个要素是图像的路径。 我尚未准备好加载图像，但我需要获得图像的高度。 我知道如何使用以下代码（在其他stackoverflow页面上找到）

function getimageheight(img) {
    var tmpImg = new Image();
    tmpImg.onload = function() {
        var ht = this.height;   
        return ht+0;
    }
    tmpImg.src = img;
}

如果我尝试在循环中调用此函数，它将返回undefined，因为图像的onload运行速度比循环慢。 我的实际代码是这样的：

        var j = 0;
        $.each(cat.placemarks, function(index, mark) {
            markers[cat.name][j] = [];
            markers[cat.name][j].name = mark.name;
            markers[cat.name][j].title = mark.title;
            markers[cat.name][j].markerURL = mark.markerURL;
            markers[cat.name][j].imageURL = mark.imageURL;
            markers[cat.name][j].imageHEIGHT = getimageheight(projpath+mark.imageURL);
            j++;
        }); 

如果我调用该函数一次，它就可以了。 但是在循环中调用它不会。 我怎样才能解决这个问题？

Answer 1

如果在用于加载它的Img对象中存储对数据对象的引用，则可以在加载完成后设置其属性的值。 希望有意义......在加载完成之前，您的数据将无法使用。 继承人的代码

var total=cat.placemarks.length;//if an array, otherwise use another each cycle to get object count
var loaded=0;

$each(cat.placemarks, function(index, mark) {
    markers[cat.name][j] = [];

    var tmpImg = new Image();
    tmpImg.refToObjWithNameOfYourChoice=markers[cat.name][j];
    tmpImg.onload = function() {
        this.refToObjWithNameOfYourChoice.imageHEIGHT=this.heigh;
        loaded++;
        if(loaded==total){
            //markers data is ready to use - add function callback herer or sumthin'
        }
    }
    tmpImg.src=projpath+mark.imageURL;

    markers[cat.name][j].name = mark.name;
    markers[cat.name][j].title = mark.title;
    markers[cat.name][j].markerURL = mark.markerURL;
    markers[cat.name][j].imageURL = mark.imageURL;
    j++;

});

Answer 2

markers[cat.name][j].imageHEIGHT未定义，因为getImageHeight()没有返回任何内容。 当然，图像加载比你的each()循环发生得慢得多，所以让getImageHeight()返回一些东西对你没什么好处。 您必须设置load()回调以确定已加载的图像并更新相应markers元素的高度。