title: How to execute JavaScript code after dynamic image height is calculated?
body: <p>I am developing a responsive website that is very image heavy. Imagine a grid of images like Pinterest for argument sake. Layered on top of these images are divs containing basic meta data such as title, author, etc. which I am dynamically vertically centering in the thumbnail image. </p>
  
  <p>I am using JavaScript to dynamically calculate on the fly (as I don't know what viewport size someone is visiting the site on and/or if they resize their browser widow) the height of the thumbnail image and centering the div of meta data within it.</p>
  
  <p>This approach seems to work pretty well except for one thing, and I suspect this is the issue...? When the page initially loads the div containing meta data starts at the bottom of the image container and then moves up after the image height and image center is determined by JavaScript. In effect, from a UX perspective, it doesn't look so great to watch this "hickup" occur. I imagine I need to implement some sort of callback function or delay so that the CSS applied to the meta div is applied ONLY AFTER the image thumbnail height is calculated.</p>
  
  <p>Below are snippets of my HTML, CSS, and JavaScript to help you understand what is going on with my code. Please let me know if you need further clarification on any parts:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;article id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;
      &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;
          &lt;div class='meta'&gt;
              &lt;p class='title'&gt;&lt;?php get_the_title(); ?&gt;&lt;/p&gt;
              &lt;p class='author'&gt;&lt;?php get_the_author(); ?&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;?php the_post_thumbnail('main'); ?&gt;
      &lt;/a&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>CSS (I'm using LESS in case you see any mixins or variables)</strong></p>
  
  <pre><code>article {
      width: 100%*(390/1174);
      display: inline-block;
      position: relative;
      z-index: 900;
      .meta {
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 500;
          font-size: 20px;
          line-height: 1em;
          text-align: center;
          .title { 
              margin: 0;
              padding: 0 16px 8px 16px;
              font-size: 1em;
              line-height: 1.15em;
              font-weight: 700;
          }
          .author { 
              .proxima-nova; 
              color: white; 
              margin: 0; 
              font-size: .70em; 
              line-height: .825em;
          }
      }
      a { display: block; }
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var article = $('article'),
      meta = $('.meta'),
      meta_height = meta.height(),
      article_height = article.height(),
      meta_center = .5 * meta_height,
      article_center = .5 * article_height,
      center = (article_center - meta_center);
      meta.css('bottom', center);
      setTimeout(function() {
          meta.show();
      }, 500);
  </code></pre>