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

Question

我正在尝试使我的图像在模态中更可靠/响应更快。

然后从数据库（MySQL）中提取图像源，并以模式显示图像。

我有以下代码：

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

之后，这就是我的JavaScript

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

我的问题是，当我得到图像的高度时，它始终输出0。我想脚本本身仅获得空白图像，我想吗？ 还有其他方法可以使用jQuery获取图像的尺寸吗？

Answer 1

首先，您必须使用单引号'将字符串传递给javascript，然后传递带有反勾号的字符串。

corect

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

至：

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

另外， href='#view-image'的目的是什么。

您是在单击链接时更改哈希还是调用onclick事件？

Answer 2

如果您需要获取图像高度，则需要在dom（文档）上渲染图像，除非，您无法获取图像高度

如果您在数据库上有图像数据，则使用PHP进行高度操作

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

Answer 3

您需要等待图像加载后才能获取其高度。 尝试使用以下代码：

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