2

我正在使用 JS/HTML/CSS 创建一个小型 Web 应用程序，其中用户有一个下拉菜单可以从 13 个不同的图像中进行选择。选项 1 是默认选项，当用户选择不同选项时，应用程序会刷新，并且应用程序中其他对象的尺寸会调整为新图像的尺寸。

为了访问 13 个不同图像的图像尺寸（高度和宽度），JS 循环启动并将尺寸存储在两个数组中。

var height_array = []
var width_array = []

for (i = 1; i <= 13;i = i + 1) {
    var img = new Image();
    if (i <= 9){
        img.src = "img/rehe/RE0"+i+"/001.png";
    }
    else{
        img.src = "img/rehe/RE"+i+"/001.png";
    }
    height_array.push(img.height);
    width_array.push(img.width);
}

我不明白的是，循环仅在部分时间成功，有时数组为空或仅部分填充。自然地，应用程序的构建完全错误。在这种情况下，刷新会有所帮助，但它仍然很烦人。

我在这里有一个非常简单的应用程序的预版本：http ://wieselundco.ch/plenum2/index.html 在此先感谢！

4

1 回答 1

2

必须先加载图像才能获得尺寸

var height_array = []
var width_array  = []

for (i = 1; i <= 13;i = i + 1) {
    (function(j) {
        var img = new Image();

        img.onload = function() {
            height_array[j] = img.height;
            width_array[j]  = img.width;
        }

        if (img.complete) img.onload();

        if (j <= 9){
            img.src = "img/rehe/RE0"+j+"/001.png";
        } else {
            img.src = "img/rehe/RE"+j+"/001.png";
        }
    })(i);
}
于 2015-04-29T20:16:23.803 回答