在Javascript中获取图像的高度/宽度（理想情况下根本不加载图像）

如果已经回答了，很抱歉，但是如果已经回答了，我找不到

我想在Javascript中查找图像文件的高度和宽度。我实际上不需要在页面中显示图像，只需要显示高度和宽度

目前，我得到了以下代码，但它返回的高度和宽度为0（在Mozilla 5中）

该文件确实存在，它与HTML位于同一目录中，并且没有高度和宽度0:）

---

我做错了什么？

如果图像未加载，则不会设置其“高度和宽度”。您必须等待图像完全加载，然后检查其大小。也许是这样的：

function getWidthAndHeight() {
    alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
    return true;
}
function loadFailure() {
    alert("'" + this.name + "' failed to load.");
    return true;
}
var myImage = new Image();
myImage.name = "image.jpg";
myImage.onload = getWidthAndHeight;
myImage.onerror = loadFailure;
myImage.src = "image.jpg";

---

图像元素的高度和宽度属性（如任何元素的offsetHeight和offsetWidth属性）， 返回0而不是实际值，直到它被添加到某个文档中（如果其style.display属性未设置为“无”）。
解决这个问题的一个常见方法是在页面的可见区域之外显示图像；用户将看不到它，它的“高度”和“宽度”属性将返回实际值，而不是0。

---

然后，您应该从文档中删除图像。

如果您选中此链接，这里有一种方法可以使用PHP获取目录中的所有图像维度，该方法可以在不必将图像加载到页面的情况下进行检查。这可能对你有帮助。您可以使用

var img = new Image();
img.src = "./filename.jpg";
img.style.position = "absolute";
img.style.left = -9999;             // Image width must not exceed 9999 pixels
img.style.visibility = "hidden";    // Maybe you can remove this
document.body.appendChild(img);
var imgHeight = img.height;
var imgWidth = img.width;
alert("image height = "  + imgHeight + ", image width = " + imgWidth); 
document.body.removeChild(img);     // Removes the image from the DOM (This does not destroy the image element)

var dimensions = <?php echo json_encode($imageDimensions)?>

var维度=

---

如果你真的不想加载图像，我认为这是一种更好的方法。下面的代码将在不等待图像完全加载的情况下获得图像的宽度/高度，使其比这里的其他解决方案快得多

用于测试将图像源中的

abc123

更改为任意随机字符串以防止缓存

还有一个问题

getImageSize（$（'#image'），函数（宽度、高度）{
$（'#info'）。文本（宽度+'，'+高度）；
});
函数getImageSize（img，回调）{
var$img=$（img）；
var wait=setInterval（函数（）{
var w=$img[0]。自然宽度，
h=$img[0]。自然高度；
if（w&h）{
清除间隔（等待）；
回调。应用（此[w，h]）；
}
}, 30);
}

有趣的方法。是否在任何地方的规范中记录了浏览器将尽快设置naturalWidth和naturalHeight，或者这只是某些实现的副作用？你有这种方法的参考资料吗？如果作者还在，我也很想知道。

var dimensions = <?php echo json_encode($imageDimensions)?>

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>