Javascript Image.onload函数将高度和宽度返回零

我想做的是得到图像的宽度和高度，然后计算比率，这将进一步帮助保持图像的纵横比

---

但是当我运行这个代码时，很多时候我得到图像的宽度和高度为

0

，这将导致旋转比率为

NaN

，最后图像不会加载，因为

0

高度和宽度。有什么帮助吗？

比赛状态。您在加载图像之前定义了

rati

，因此它显然无法知道正确的大小，并且确实

undefined/undefined

。要修复此问题，只需将需要加载映像的所有代码放入

icon1.onload

处理程序中。

此操作异步运行。该行：

var icon1 = new Image();
var wid1;
var hei1;
icon1.onload = function () {
    wid1 = icon1.width;
    hei1 = icon1.height;
};
icon1.src = resource;
var rati = wid1 / hei1;

无论是否加载图像，都将运行。这意味着

wid1

和

hei1

是

未定义的

，将两个未定义的值除以

NaN

在对其执行操作之前，确保已加载

wid1

和

hei1

。您可以将除法操作放在

onload

处理程序中（以及依赖于这些值的所有其他操作：

var rati=wid1/hei1;

---

JavaScript异步加载图像，因此您试图在图像仍在加载时计算比率。您必须将计算移到回调函数中：

var icon1, wid1, hei1, rati;

//create our image object
icon1 = new Image();

icon1.onload = function () {
    wid1 = icon1.width;
    hei1 = icon1.height;
    rati = wid1 / hei1;

    //everything else that depends on these variables 
    //should be placed here as well

};

//start loadin'
icon1.src = resource;

---

在onload回调中，image.width和image.height为0时出现问题。它们是为jpg文件设置的，在加载png时没有设置。 我通过在onload回调函数中使用this.width和this.height修复了这个问题。它们不是零。

---

这可能会帮助其他人。我使用的是chrome。

在执行

onload

回调之前，您正在计算

rati

。当值可用时，您必须在回调中计算它。因此rati变量应该在icon1中。onload处理程序？我需要从

I返回图像的宽度和高度con1.onload（）

到其他函数。怎么做？我应该在

onload（）

中使用return语句还是有其他方法？@barnes从技术上讲，你不能“返回”由于

onload

是异步执行的。最接近可返回的是承诺，但它仍然是异步的。您在回调中执行代码的延续。

var icon1 = new Image();
var wid1;
var hei1;
icon1.src = resource;
icon1.onload = function () {
    wid1 = icon1.width;
    hei1 = icon1.height;
    var rati = wid1 / hei1;
};