javascript - Image.onload 函数返回高度和宽度为零

Question

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

我要做的是获取图像的宽度和高度，然后计算将进一步有助于保持图像纵横比的比率。

但是当我运行这段代码时，很多时候我会得到图像的宽度和高度，因为0这将导致转换比率NaN，最终图像由于0高度和宽度而永远不会加载。有什么帮助吗？

Answer 1

此操作异步运行。该行：

var rati=wid1/hei1;

无论图像是否加载都运行。这意味着wid1andhei1是undefined和将两个未定义的值相除的结果NaN。

wid1在对它们进行操作之前，请确保hei1已加载。您可以做的是将除法操作放在onload处理程序中（以及取决于这些值的所有其他内容：

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;

Answer 2

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

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

Answer 3

我遇到了一个问题，即 onload 回调中的 image.width 和 image.height 为 0。它们是为 jpg 文件设置的，而不是在我加载 png 时设置的。我通过在 onload 回调函数中使用 this.width 和 this.height 解决了这个问题。那些不是零。
也许这会帮助别人。我用的是铬。

Answer 4

比赛条件。您是rati在图像加载之前定义的，所以很明显它不知道正确的大小并且undefined/undefined. 要修复，只需将需要加载图像的所有代码放入icon1.onload处理程序中。