title: Js - How to get image size every time
body: <p>So I have this bit of <code>Jquery</code> 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 <code>height</code> and <code>width</code> of the image is <code>0</code>. Is there a way for me to be sure to always get the size of the image?</p>
  
  <p>my code so far looks like this:</p>
  
  <pre><code>    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 &lt; windowWidth) {   //  Landscape mode
          if (original.clientWidth &gt; windowWidth) {
              width = windowWidth;
          } else {
              width = original.clientWidth;
          }
  
          if (original.clientHeight &gt; windowHeight) {
              width = undefined;
              height = windowHeight;
          } else {
              height = original.clientHeight;
          }
      } else {    //  Portrait mode
          if (original.clientHeight &gt; windowHeight) {
              height = windowHeight;
          } else {
              height = original.clientHeight;
          }
  
          if (original.clientWidth &gt; 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);
  </code></pre>