How to execute JavaScript code after dynamic image height is calculated?

Question

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.

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.

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.

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:

HTML

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <a href="<?php the_permalink(); ?>">
        <div class='meta'>
            <p class='title'><?php get_the_title(); ?></p>
            <p class='author'><?php get_the_author(); ?></p>
        </div>
        <?php the_post_thumbnail('main'); ?>
    </a>
</article>

CSS (I'm using LESS in case you see any mixins or variables)

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; }
}

JavaScript

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);

Could you make a small [fiddle](http://jsfiddle.net) with that ? — soyuka, Mar 12 '13 at 16:44
This might be relevant: http://stackoverflow.com/q/3877027/901048 — Blazemonger, Mar 12 '13 at 16:48
how are you fetching the images? is it in the `the_post_thumbnail('main')` php call? — abbood, Mar 12 '13 at 17:00

abbood · Answer 1 · 2013-03-12T17:05:09.690

you are using php to fetch your images.. you can use jQuery.ajax() to fetch the images asynchronously from your image server, and then use the ajax() callback methods like done() in this example:

$.ajax({
  url: "http://yourImageServer/image.png"
}).done(function ( data ) {
   // your callback method here
});

there you can insert your meta information having known the image height and width etc etc.. in the meantime you can pre-load those divs with spinners.

How to execute JavaScript code after dynamic image height is calculated?

1 Answers1