首页 文章

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

提问于
浏览 次
2
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 高度和宽度，图像永远不会加载 . 任何帮助？

javascript

3 回答

  • 1

    此操作以异步方式运行 . 这条线：

    var rati=wid1/hei1;

    无论图像是否加载，都会运行 . 这意味着 wid1 和 hei1 是 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;
    回复于
  • 0

    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;
};
    回复于
  • 1

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

    回复于

相关问题