title: Images in "display: none" divs not loading onpageload
body: <p>I am scaling images to fit within a div and I want to center them with letterboxes by using positions, but when I try to get the width of the element with <code>.width()</code> immediately after setting the height, <code>.width()</code> returns 0.</p>
  <p>For example:</p>
  <pre><code>$(image).css(&quot;height&quot;, &quot;100%&quot;);
  console.log($(image).width());
  </code></pre>
  <p>This echoes 0 to the console, but if I call <code>$(image).width()</code> from the console sometime later, the correct value is given. How can I get the width of the <code>&lt;img&gt;</code> element immediately after I change it's height?</p>
  <h2>Edit:</h2>
  <p>So my code goes something like this:</p>
  <pre><code>$(window).load(function(){
      cSCMH();
  });
  
  function cSCMH()
  {
      //Some other code
      for(var i = 0; i &lt; $(&quot;sc mh im img&quot;).length; i++)
      {
          var image = $(&quot;sc mh im img&quot;)[i];
          
          //More code
          $(image).css(&quot;height&quot;, &quot;100%&quot;);
          console.log($(image).width());
      }
  }
  </code></pre>
  <p>The console still receives 0</p>
  <hr />
  <h2>Edit 2:</h2>
  <p>Okay so I think I know what the root of the problem is. The images don't appear to load into the page until they are made visible on the screen (I have them in a tab div where the display is set to none onload).</p>
  <p>Is there any way to force the images to load even though they are not visible?</p>
  <hr />
  <p>I have confirmed this is the issue. The images are not loaded until the div's display is set to block. How can I make the images load in onpageload instead?</p>