I'm currently working on a piece of Jquery code that is designed to display an image fitting within the screen's dimensions. These images are generated dynamically as needed. However, I am facing an issue where the height and width of the image are set to 0 upon initial loading. Is there a method to reliably retrieve the image size every time?
Here is what my code looks like so far:
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,
windowWidth = window.innerWidth * 0.8;
original.style.opacity = '0';
original.style.position = 'absolute';
original.style.zIndex = '-99';
parent.appendChild(original);
var elem = document.createElement('img');
elem.src = image.Url;
elem.clientHeight = original.clientHeight;
elem.clientWidth = original.clientWidth;
var width,
height;
if (windowHeight < windowWidth) {
if (original.clientWidth > windowWidth) {
width = windowWidth;
} else {
width = original.clientWidth;
}
if (original.clientHeight > windowHeight) {
width = undefined;
height = windowHeight;
} else {
height = original.clientHeight;
}
} else {
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);