Get Image height before its fully loaded

Question

I need to be able to use jQuery to get the height of an image #imageHero before it has fully loaded into the page. I then need to set the height of a div #imageDiv to be the height of the #imageHero which is being loaded.

I need this to happen ASAP when the page is created... currently the code I am using to set the div #imageDiv to the height of the image #imageDiv is happening to slowly and the page load looks odd...

Any suggestions?

possible duplicate of [Get image dimensions with Javascript before image has fully loaded](http://stackoverflow.com/questions/6575159/get-image-dimensions-with-javascript-before-image-has-fully-loaded) — A. Wolff, Apr 30 '14 at 14:10
Thanks A Wolff - I saw that, but no solution was given in code terms - just that jFiddle... i was hoping for a little more support... — dubbs, Apr 30 '14 at 14:11
I'm sorry, i don't know any other way. If any, I would like to know it too — A. Wolff, Apr 30 '14 at 14:12

score 5 · Accepted Answer · edited May 23 '17 at 11:47

5

As mentioned in the comments, this has already been answered here, although in pure JavaScript not JQuery. I have adapted that answer to:

Use JQuery
Work with a static image
Created a simple function that you can call

Here's the function...

function getImageSize(img, callback){
    img = $(img);

    var wait = setInterval(function(){        
        var w = img.width(),
            h = img.height();

        if(w && h){
            done(w, h);
        }
    }, 0);

    var onLoad;
    img.on('load', onLoad = function(){
        done(img.width(), img.height());
    });


    var isDone = false;
    function done(){
        if(isDone){
            return;
        }
        isDone = true;

        clearInterval(wait);
        img.off('load', onLoad);

        callback.apply(this, arguments);
    }
}

You can call the function with an image element, and a callback accepting width and height arguments...

getImageSize($('#imageHero'), function(width, height){
    $('#imageDiv').height(height);
});

Fiddle - To see the full effect make sure the image is not in your cache (append a random to the image source).

edited May 23 '17 at 11:47

Community

1
1

answered Apr 30 '14 at 14:52

Drahcir

11,772
24
86
128

Thanks - will see if this way works - how would I get the function to work on y #imageHero image? – dubbs Apr 30 '14 at 15:43
@dubbs I've updated the snippet at the bottom of my answer, it shows the code for your image. – Drahcir Apr 30 '14 at 15:45
OK thanks. I still have the issue that the #imageDiv is not resized instantly when the page loads... could this be due to position of jQuery calls on the page itself? – dubbs Apr 30 '14 at 15:50
@dubbs Can you post some code, just the HTML containing the image and it's containers. – Drahcir Apr 30 '14 at 15:54
Actually - its seems to be working really nicely - I placed the function and call inline in the HTML so as to make it load quicker and does the job pretty well // thanks :) – dubbs Apr 30 '14 at 16:02

score 1 · Answer 2 · edited May 23 '17 at 10:31

An improvement on @Drahcir's answer, this version returns the true height and has other improvements. For testing change abc123 in image source to any random string to prevent caching.

There is a JSFiddle Demo as well.

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>

Get Image height before its fully loaded

2 Answers2

Linked