我在两个不同的部分和div中有两个图像。我想同时获取原始尺寸并将其发送到我的Java脚本文件中进行一些计算。如何同时获取图像尺寸。
html文件
<section id ="hi">
<img src = "images/hi.png" onload = "OnImageLoad(event);" />
</section>
<section id = "bye">
<img src = "images/hi.png" onload = "OnImageLoad(event);"/>
</section>
js
function OnImageLoad(evt) {
var img = evt.currentTarget;
// what's the size of this image
var w = $(img).width();
var h = $(img).height();
在这段代码中,我能够获取图像的图像尺寸,但是它们仅返回一个图像的尺寸。我想同时获取两个图像的尺寸。
像这样:
function OnImageLoad(evt) {
var img1 = evt.currentTarget;
var img2 = evt.currentTarget;
// what's the size of this image
var w1 = $(img1).width();
var h1 = $(img1).height();
var w2 = $(img2).width();
var h2 = $(img2).height();
最佳答案
您不能这样做,它们是async
任务。仅当图像完全加载后才可以计算图像的大小,因此,如果第一个图像的大小大于第二个图像的大小,则计算第一个图像的大小将比第二个图像花费更多的时间。
您可以做的是,异步获取两个图像尺寸,并且当两个图像都完成后,您就可以进行计算了。
var sizes = [];
var counter = 0;
function OnImageLoad(evt) {
var img = evt.currentTarget;
// what's the size of this image
var w = $(img).width();
var h = $(img).height();
counter++;
sizes.push({
height: h,
width: w
});
if (counter == 2) {
callAnotherFunction(sizes)
}
}