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元素的高度。

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

2 个答案: