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

我正在加载一个json文件并将其解析成Javascript中的一个数组。其中一个元素是图像的路径。我还没有准备好加载图像，但我需要获取图像的高度。我知道该怎么做，与如下代码（在其它计算器网页中找到）Javascript：如何获取循环中未加载图像的高度？

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

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

 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++; 
     });

如果我一旦调用该函数，它的工作原理。但是在循环中调用它不会。我怎样才能解决这个问题？

来源

2013-08-24 Doug Wolfgram

我可以误读的东西，但我很困惑，你说这是工作，当你调用该函数一次。你的'getImageHeight（）'函数没有返回任何东西。你的'onload（）'函数的返回值不会在任何地方发生，当然不会返回到调用'getImageHeight（）'的代码。您无法获取未加载的图像的高度。你的'onload'函数只能获取高度，因为它在载入图像后运行**。 – GreatBigBore

如果我在退货前提醒（ht），它会显示正确的值。它为什么不返回它？ –

看起来你已经得到了一些其他的反馈，但如果你仍然有这个问题，请考虑：'load（function（）{/ * do stuff * /}）'不会导致'/ *做些什么*/'在调用'load（）'时发生。当图像加载完成后，会导致'/ *做些* /'操作*。有人在另一条评论中提到异步执行。研究一下。在javascript中，你必须考虑启动一件事情，退出启动该事件的函数，然后在完成该事情后再次在另一个函数中唤醒。 – GreatBigBore

如果您在用于加载它的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++; 

});

来源

2013-08-24 20:27:12 Martin

啊。我懂了。将内置的负载和赋值给数组。我只需要意识到整个阵列不会有一小段时间可用。这应该工作。 –

可能不是最漂亮的代码，但可以完成工作。完整的数组将立即可用，它的元素的imageHeight属性将不会被设置，直到完成相应图像的加载。你熟悉异步执行吗？ – Martin

有点，这就是为什么我知道这是一个问题。 :) –

markers[cat.name][j].imageHEIGHT未定义，因为getImageHeight()没有返回任何东西。当然，图像加载比你的each()循环要慢得多，所以getImageHeight()返回的东西对你来说不会有任何好处。你必须设置你的load()回调，以确定哪个图像已被加载，并更新相应的元素的高度。

来源

2013-08-24 19:55:38 GreatBigBore

它为什么不返回？返回在onload函数中，所以它应该在load之后返回。但我的问题是调用代码在这个值返回之前继续。 –

@DougWolfgram你有两个功能，getimageheight和onload函数。后者返回高度，但前者没有返回。 – Christophe

哦废话。我明白了......呃！ –

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

回答

相关问题