title: Bind jQuery function to display of image (via Stellar.js)
body: <p>I am attempting to use Bootstrap (responsive) and Stellar.js to create a nice parallax layout. The issue I'm having is that (as per the Stellar.js documentation) <strong>the image/div must have a defined height</strong> to avoid the problem of the image popping in and out (as per <a href="https://github.com/markdalgleish/stellar.js/issues/7" rel="nofollow">https://github.com/markdalgleish/stellar.js/issues/7</a>).</p>
  
  <p>As I am using the responsive layout, it is necessary that the height definition is set dynamically (so that the image is not distorted when it is displayed on on smaller viewports).</p>
  
  <p>Furthermore, Stellar.js sets the element as <em>display: none</em> until it appears, so it is not possible to simply check the size of the image when the page is loaded. As a result I need to find a way to <strong>identify the height of the image once Stellar.js amends this to be <em>display: block</em> so I can bind a function to this event</strong></p>
  
  <p>Any suggestions would be greatly appreciated! I can provide more information where necessary.</p>
  
  <p><strong>Additional Details:</strong></p>
  
  <p>Here is an example of the HTML element I am using. It is worth noting that the height reference still needs to be applied to the image even-though the Stellar plugin is functioning on it's parent div.</p>
  
  <pre><code>&lt;div class="span6"&gt;
    &lt;div  data-stellar-ratio="1.7" data-stellar-vertical-offset="-700"&gt;
      &lt;img src="img/portfolio/web/hero.png" alt="Website design and development service"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is an update to the Stellar.js plugin I have attempted to make in relation to the suggestions:</p>
  
  <pre><code>hideElement: function($elem) {
  
      var sImg = $elem.children('img'),
          imgHeight = sImg.height();
  
      sImg.css({ height: imgHeight });
      $elem.hide();
  }
  </code></pre>
  
  <p>Alas this still results in the image having "height: 0px" applied, which would suggest the calculation is happening prior to the image being loaded or after it is hidden! I cannot understand why this is.</p>