Get image height and then show

Question

I want to load the image, determine the height, and THEN show it

Here is my code:

$("#block").animate({
        height: HERE GOES HEIGHT + 50px for additional space
    },
    function() {
        $("img").fadeIn("slow");
    });

How would the system be able to determine the height before it was loaded? You could possibly load the image, determine the height, and THEN show it (fade in, or whatever you need). I think that's the best way. — Mani5556, Sep 08 '15 at 17:54
Yup. "load the image, determine the height, and THEN show it" That is what i want. — , Sep 08 '15 at 18:15

score 2 · Accepted Answer · answered Sep 08 '15 at 18:09

2

Will this work?

$("img").load(function(){
var imgHeight = $(this).height();
});

$("#block").animate({
    height: '+='imgHeight
},
function() {
    $("img").fadeIn("slow");
});

answered Sep 08 '15 at 18:09

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

Grabbing the image dimensions before the page is loaded is not something I think is particularly possible like this.

However there is a similar post to grab the image dimensions before its fully loaded, then you could tie that into your animation.

Get image dimensions with Javascript before image has fully loaded

edited May 23 '17 at 12:14

Community

1
1

answered Sep 08 '15 at 18:04

kwh71787

576
1
4
14

Get image height and then show

2 Answers2