加載圖像后如何獲取尺寸？

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());
});