Wie erhält man die Abmessungen eines Bildes nach dem Laden? - Javascript, PHP, Jquery

Ich versuche, mein Image in einem Modal zuverlässiger / reaktionsfähiger zu machen.

und ich ziehe die Bildquelle aus meiner Datenbank (MySQL) und zeige das Bild auf einem Modal.

Ich habe diesen Code:

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

Danach ist dies mein JavaScript

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

Mein Problem ist, wenn ich die Höhe desimage es gibt immer 0 aus. Ich denke, das Skript selbst bekommt nur das leere Bild, nehme ich an? Gibt es eine andere Möglichkeit, die Dimension eines Bildes mit jQuery zu ermitteln?

Antworten:

0 für die Antwort № 1

Zunächst müssen Sie den String in einfachen Anführungszeichen an Javascript übergeben ", du gehst mit Back Ticks vorbei.

richtig

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

Zu:

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

Auch was ist der Zweck von href="#view-image".

Ändern Sie den Hash beim Klicken auf einen Link oder beim Aufrufen? onclick Veranstaltung?

---

0 für die Antwort № 2

Wenn Sie die Bildhöhe benötigen, müssen Sie das Bild auf dom (document) rendern, es sei denn, Sie können die Bildhöhe nicht ermitteln

Wenn Sie Bilddaten in der Datenbank haben, führen Sie die Höhenoperation mit aus PHP

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

---

0 für die Antwort № 3

Sie müssen warten, bis das Bild geladen ist, bevor Sie seine Höhe erreichen. Versuchen Sie es mit diesem Code:

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

---