Does <img> need a height or width defined for gsap.getProperty to return value other than undefined?

[Jim Nayzium]

What I mean by this question is if my img html code is like this:

<img id="sidebar_thumb_img" class="thumbnail_image" src="{{%dynamic_image%}}">

And this image sits inside a div that is not a set width... will gsap.getProperty("#sidebar_thumb_img", "width") not actually "calculate" the width, but return undefined?

[Jim Nayzium]

NEVER MIND - I am a moron!!!

I was using quick tester code on the html page like 

<script>
  let width = gsap.getProperty('#etc');
</script>

And just had that script tag above my HTML like a complete DOLT... as soon as I moved it below the HTML of course it worked as expected and calculated the dynamic width!

[Jim Nayzium]

Whelp, now that I have the moron-mistake corrected, I am finding that the gsap.getProperty( "#X", "height") calculates to ZERO unless the height is explicity stated inside the image tag with a style tag. Does tthat sound fishy or is that how it will be?

[Jim Nayzium]

Solved my own issue again --- with ON LOAD event listener first. I guess the width somehow triggers sooner but the height only gets detected aftera. full call of ON LOAD like this

  $("#sidebar_boat_thumb_img").on('load', function() { 
        console.log("On Load", gsap.getProperty("#sidebar_boat_thumb_img", "height")); 
    });

 

[GreenSock]

Yep, the browser can't know how big the image is that you're loading until it's loaded

 

Glad you figured it out.