在 JavaScript 中调整图像大小的奇怪问题（仅在 Firefox 中存在问题）

Question

代码：

function resizeImage()
{
    // this just dynamically changes the width of the wrapper depending on the popup width
    // to properly calculate what size should the image be fit into
    var largeWidth = gallery.offsetWidth - 300;
    setStyle(div, "width: " + largeWidth + "px");
    maxWidth = div.offsetWidth;
    if (maxWidth < 300) // can only happen if CSS max-width is not supported
    {
        maxWidth = 300;
    }
    maxHeight = div.offsetHeight - 60;
    if (maxHeight < 240)
    {
        maxHeight = 240;
    }
    var style = "width: " + ((origWidth > maxWidth) ? maxWidth : origWidth) + "px;";
    setStyle(img, style); // at this point the image is fit into the wrapper by width, still need to check the height
    if (img.height >= maxHeight) // the height is out of bounds
    {
        style = "height: " + maxHeight + "px;";
    }
    else // height is not enough, pad it by half (hack for vertical-align: middle...)
    {
        style += 'padding-top: ' + Math.floor((maxHeight - img.height) / 2) + "px";
    }
    setStyle(img, style);
}

问题：
我测试的每个浏览器（IE 7、8、9 文档模式（填充和边距：自动在 Quirks 模式下不起作用，因此无法居中）、Safari 5.1.2、Opera 11.61、Chrome 17.0.963.66）都能很好地完成这项工作，无论我切换图像的速度有多快，填充始终是正确的（大图像右侧有缩略图，也可以使用箭头键切换图像）。但是 Firefox 10.0(.2) 有一个奇怪的问题：当您切换图像时，填充/高度通常会被破坏（有时填充比应有的值高 > 3 倍，或者根本不存在，或者高度不存在'不要切换等）。 Firefox调整图像大小的方式有问题吗？因为我不明白为什么只有 Firefox 这样做（即使是该死的 IE 与 FF 相比也能完美运行）。

如果需要更多信息，请尽管询问。当然，我可以只添加一个指向实际页面的链接，但我不确定是否允许这样做，所以我暂时不要这样做。

编辑：好的，我已经设法更接近问题（我认为）。当我更改图像的来源（img.src）和 console.log 的 img.width 和 img.height 时，来源会改变，但宽度和高度不会！它只发生在 Firefox 中！这是什么鬼？

Answer 1

当您更改 .src 时，规范说新图像是异步加载的。即使它已“预加载”也是如此。这意味着取决于当前加载的图像的宽度/高度也会异步更改。

因此，如果您设置 .src 并立即读取宽度/高度，您应该会根据规范获得旧的图像尺寸。使用 onload 处理程序等待图像实际加载？