我在两个不同的部分和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)
    }
}

10-05 21:02
查看更多