title: How to get image dimensions before it's lazy loaded using jQuery?
body: <h3>The goal:<br></h3>
  
  <p>I have a set of images in a container which has a height of 0. When the trigger is clicked I want the container to slide down (animated) and lazy load the images in (using the lazy load jQuery plugin).</p>
  
  <h3>The Markup:<br></h3>
  
  <pre><code>&lt;a href="#"&gt;Trigger 1&lt;/a&gt;
  
  &lt;div class="container-1"&gt;
      &lt;img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif"&gt;
      &lt;img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif"&gt;
      &lt;img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif"&gt;
  &lt;/div&gt;
  
  &lt;a href="#"&gt;Trigger 2&lt;/a&gt;
  
  &lt;div class="container-2"&gt;
      &lt;img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif"&gt;
      &lt;img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif"&gt;
      &lt;img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif"&gt;
  &lt;/div&gt;
  
  // ETC
  </code></pre>
  
  <h3>The Problem:<br></h3>
  
  <p>In order to animate the container I need to give it a height. Currently I use jQuery quickly to get the height of the container, store it in a data-height attribute and then animate the height to zero. The problem is that it is getting the height based on the loading gif's inside when the image that will actually be loaded might be much taller. So the data-height attribute might be 600px when the fully loaded container will be 2000px.</p>
  
  <p>Should/Can I:</p>
  
  <ol>
  <li>Get the height of the image stored in the data-src attribute before it is lazy loaded in, add those together, then set the container to that height.</li>
  <li>Keep the container closed, load in each image, once their loaded I can add them together, calculate the container height, then slide it down (not ideal as it'll be very slow).</li>
  <li>Any other suggestions?</li>
  </ol>
  
  <h3>The Kicker:</h3>
  
  <p>This site will be responsive so the fully loaded images' height will vary based on browser width as they have a max-width: 100%;</p>