CODEWITHSUNDEEP
javascriptjquerycss
Michael Tot Korsgaard
Michael Tot Korsgaard

Reputation: 4014

Js - How to get image size every time

So I have this bit of Jquery code, the purpose of the code is to show an image that fits within the dimensions of my screen. The images are loaded dynamically ie: they will be generated when needed. The problem I have is that when I load the images the first time the height and width of the image is 0. Is there a way for me to be sure to always get the size of the image?

my code so far looks like this:

    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);

Upvotes: 0

Views: 72

Answers (2)

Michael Tot Korsgaard
Michael Tot Korsgaard

Reputation: 4014

After advice from Martin Gottweis (Whom are more than welcome to make an answer for me to accept ;-) )

My solution looks like this:

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

with this css

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

Upvotes: 0

Neha
Neha

Reputation: 1548

You can try this way to check the image size once is loaded

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

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

Upvotes: 1

Related Questions