Jak uzyskać wymiary obrazu po jego załadowaniu? - javascript, php, jquery

Staram się, aby mój wizerunek był bardziej niezawodny / responsywny w modalu.

i pobieram źródło obrazu z mojej bazy danych (MySQL) i pokazuję obraz na modalu.

Mam ten kod:

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

Potem jest mój JavaScript

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

Mój problem polega na tym, że osiągam wysokośćobraz zawsze wyświetla wartość 0. Myślę, że sam skrypt pobiera tylko czysty obraz, jak sądzę? Czy istnieje inny sposób na uzyskanie wymiaru obrazu za pomocą jQuery?

Odpowiedzi:

0 dla odpowiedzi № 1

Przede wszystkim musisz przekazać ciąg do javascript używając pojedynczych cudzysłowów ", przechodzisz z powrotem tykami.

corect

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

Do:

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

Również, jaki jest cel href="#view-image".

Czy zmieniasz hasz po kliknięciu linku lub dzwonieniu onclick zdarzenie?

---

0 dla odpowiedzi nr 2

Jeśli potrzebujesz uzyskać wysokość obrazu, musisz renderować obraz na dom (dokument), chyba że nie możesz uzyskać wysokości obrazu

Jeśli masz dane obrazu w bazie danych, wykonaj operację wysokości używając PHP

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

---

0 dla odpowiedzi № 3

Musisz poczekać na załadowanie obrazu zanim osiągniesz jego wysokość. Spróbuj użyć tego kodu:

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

---