Load height of banner responsive before of content below

I'm developing a banner responsive website, however I don't know the height, when the page loads the content below the banner loads first than the banner. How do I load height of banner first?

By "banner" I mean the big image in the background. My site: http://ift.tt/1M8TjFI

This is the problem: http://ift.tt/1E61BWK

html code

<figure class="hero-banner">
    <img class="hero-banner__image" src="assets/img/banners/home.jpg" alt="Homem saltando entre montanhas rochosas, com um ceú azul sem nuvens" width="1920" height="700">
    <figcaption class="hero-banner__description">
        <div class="container">
            <h2>Melhore seus resultados<br>Amplie horizontes</h2>
            <h1>Sistemas de gestão empresarial</h1>
        </div>
    </figcaption>
</figure>

css code

.hero-banner {

    &__image {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    &__description {
        position: absolute;
        top: 50px;
        z-index: 1;
        width: 100%;
    }
}