javascript - img.width 和 img.height 随机返回 0

Question

感谢现有的线程，我能够想出以下代码:

var img = new Image();
img.src = imgSrc;
if(imgSrc.substring(imgSrcLength-4, imgSrcLength) == '.ico'){
    document.getElementById('size' + lineCount).innerHTML = img.height + 'x' + img.width;
} else {
    document.getElementById('size' + lineCount).innerHTML = img.naturalHeight + 'x' + img.naturalWidth;
}

你基本上可以忽略 lineCount 部分。它只是应该在 html 列表中显示不同图像的大小。然而，有时宽度或高度返回为 0。对我来说，它似乎是随机的，因为如果我再次运行脚本，将加载正确的数量，而其他地方则为 0。如果我尝试通过 Microsoft Edge 函数调试代码一切正常，不会有任何 0。

这是我的 Microsoft Edge 引起的问题还是我错过了什么？

Answer 1

您需要等待图像完成加载，然后获取其大小。像这样尝试一下:

var img = new Image();
img.onload = function () {
    if(imgSrc.substring(imgSrcLength-4, imgSrcLength) == '.ico'){
        document.getElementById('size' + lineCount).innerHTML = img.height + 'x' + img.width;
    } else {
        document.getElementById('size' + lineCount).innerHTML = img.naturalHeight + 'x' + img.naturalWidth;
    }
};
img.src = imgSrc;