Js - 如何每次获取图像大小答案

【问题标题】：Js - How to get image size every timeJs - 如何每次获取图像大小
【发布时间】：2016-06-09 16:03:41
【问题描述】：

所以我有这段Jquery 代码，代码的目的是显示适合我屏幕尺寸的图像。图像是动态加载的，即：它们将在需要时生成。我遇到的问题是，当我第一次加载图像时，图像的height 和width 是0。有没有办法让我确保始终获得图像的大小？

到目前为止，我的代码如下所示：

    var parent = document.getElementById('gallery-lightBox-large'),
        image = originalImages[currentIndex],
        original = document.createElement('img');

    parent.innerHTML = '';

    original.src = image.Url;

    var windowHeight = window.innerHeight * 0.8,    //  Allow for 10% margin
        windowWidth = window.innerWidth * 0.8;      //  Allow for 10% margin

    original.style.opacity = '0';
    original.style.position = 'absolute';
    original.style.zIndex = '-99';
    parent.appendChild(original);
    //console.info('original : ' + original.clientHeight, original.clientWidth);

    var elem = document.createElement('img');
    elem.src = image.Url;
    elem.clientHeight = original.clientHeight;
    elem.clientWidth = original.clientWidth;

    var width,
        height;

    if (windowHeight < windowWidth) {   //  Landscape mode
        if (original.clientWidth > windowWidth) {
            width = windowWidth;
        } else {
            width = original.clientWidth;
        }

        if (original.clientHeight > windowHeight) {
            width = undefined;
            height = windowHeight;
        } else {
            height = original.clientHeight;
        }
    } else {    //  Portrait mode
        if (original.clientHeight > windowHeight) {
            height = windowHeight;
        } else {
            height = original.clientHeight;
        }

        if (original.clientWidth > windowWidth) {
            height = undefined;
            width = windowWidth;
        } else {
            width = original.clientWidth;
        }
    }

    if (width != undefined) {
        if (width === 0) {
            width = 200;
        }
        elem.width = width;
    }

    if (height != undefined) {
        if (height === 0) {
            height = 200;
        }
        elem.height = height;
    }

    parent.appendChild(elem);

【问题讨论】：

stackoverflow.com/questions/6606262/…
您是否尝试过为此使用 css？我相信您可以使用视口单元来获得更快、更一致的行为。
@MartinGottweis：你是对的，给图像一个max-height 和max-width 解决了这个问题，不知道为什么我没有想到这个^^
很高兴为您提供帮助。祝你的项目好运:-)

标签： javascript jquery css

【解决方案1】：

您可以尝试这种方式来检查加载后的图像大小

var img= document.getElementById('imgid');

img.onload = function () {
    alert(img.width + "," + img.height);       
};

【讨论】：

这样就可以了。如果我要使用JavaScript 解决方案，我会使用它，但如果我可以在css 中保留尽可能多的设计，我会这样做。 +1 很好的解决方案^^

【解决方案2】：

根据Martin Gottweis 的建议（非常欢迎谁回答让我接受;-)）

我的解决方案如下所示：

var parent = document.getElementById('gallery-lightBox-large'),
    image = originalImages[currentIndex];
var elem = document.createElement('img');
elem.src = image.Url;
parent.appendChild(elem);

使用这个 css

#gallery-lightBox-large img {
    max-height:70vh;
    max-width: 70vw;
}

【讨论】：