CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Will Phillips
Will Phillips

Reputation: 145

Slow loading image causing problems with jQuery height variable

Folks,

I'm a UX/IA guy whose background in front-end dev is fastly evaporating. I'm working on launching a new version of my portfolio and am running into a dynamic height issue with jQuery.

I have a fluid layout with a hero image. That image's height changes as a result. I've two sibling divs that I use jQuery to dynamically set the height of.

However, the hero image is fairly large, and if on a slow internet connection, the layout renders far too-tall, as the jquery.functions.js files loads before the hero image is finished loading, causing the jquery to set the height of the divs to the full height of the image, rather than its as-displayed height.

How can I get around this?

For the jquery to only load after the hero image loads? Is there a function for running jquery after an image has loaded?

The HTML: 

<section id="hero">
    <div id="border-top">
        <div class="corner tl"></div>
        <div class="corner tr"></div>
        <div class="center"></div>
    </div>  
    <div class="border"><div class="content">
        <h3>Updating and Improving Checkout</h3>            
        <h1>Tarot.com eCommerce Update</h1>
    </div></div><!-- /border /content -->
    <div id="border-bottom-casestudy">
        <div class="corner bl"></div>
        <div class="corner br"></div>
        <div id="hero-asset">
            <img src="img/img-work-tarotecom-hero.png" />
        </div>
        <div class="clearing"></div>
    </div>
</section>

ThejQuery:

$(document).ready(function() {
    var image_height = $('#hero-asset').height();
    $('#border-bottom-casestudy .corner').height(image_height);
});

$(window).resize(function () {
    var image_height = $('#hero-asset').height();
    $('#border-bottom-casestudy .corner').height(image_height);
});

The WIP page in question:

http://test.willphillips.org/project.html

Upvotes: 0

Views: 781

Answers (2)

KnightHawk0811
KnightHawk0811

Reputation: 931

try using a "progressive" JPEG. It should get the correct size much sooner (near immediately) and the video in the link shows just how effective it can be when compared to other formats.

(The same holds true for almost any large image in the Internet)

http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html

Upvotes: 0

War10ck
War10ck

Reputation: 12508

Rather than run your first two lines of code in a $(document).ready(function () { ... }); block, try moving them inside a load event handler attached to the image inside the document ready block. This way, the calculation is completed after the image is fetched and loaded successfully into the DOM.

Try the following:

$(document).ready(function () {
    $('#hero-asset img').load(function () {
        $('#border-bottom-casestudy .corner').height($(this).height());
    });
});

Reference Link: .load()

Upvotes: 2

Related Questions