加载图像后如何获取尺寸？

Question

I'm trying to make my image more reliable / responsive in a modal.

and I'm pulling the image source from my database (MySQL) and show the image on a modal.

I have this code:

<a class='modal-trigger' href='#view-image' onclick='getImage(`<?php image source; ?>`)'></a>

After that this is my JavaScript

    function getImage(imgsrc){
      $("#item-thumb").attr("src",imgsrc);
      var height = $('#item-thumb').height();
      if(height > '600'){
        console.log(height);
      }else{
        console.log(height);
      } 
    }

My problem is when I'm getting the height of the image it always outputs 0. I think the script itself is getting only the blank image, I suppose? Is there any other way to get the dimension of an image using jQuery?

Answer 1

First of all you have to pass string to javascript using single quotes ' , you are passing with back ticks.

corect

<a class='modal-trigger' href='#view-image' onclick='getImage(`<?php image source; ?>`)'></a>

To:

<a class='modal-trigger' href='#view-image' onclick="getImage('<?php image source;?>')"></a>

Also, what is the purpose of href='#view-image' .

Are you changing the hash on click of link or calling onclick event?

Answer 2

If u need to get the image height then u need to render the image on dom (document) unless , u can't get the image height

If u have image data on database, then do the height operation using PHP

list($width, $height, $type, $attr) = getimagesize("image_name.jpg");

Answer 3

You need to wait for the image to load before getting its height. Try using this code:

$('#item-thumb').load(function () {
  console.log($(this).height());
});