How get image size of image loaded by lazy load

Question

I am using lazy load plugin (jquery.lazyload.js) and I try to get the image size that it loads. So in the display part I have:

 echo '<img #img id="img-' . $i . '" name="' . $filename . '" class="lazy" data-original="'.$image.'" />';

Java Script:

<script type="text/javascript">     
   displaysize(img) {
      console.log(img.clientWidth, img.clientHeight);
   }        

</script>


<script src="js/rectangle3.class.js"></script>

HTML:

<div id="imgsize">
  <p id='imgsize-debug'></p>
  <button id='map-download-btn' onclick='displaysize();'>Image size:</button>
  <div id='imagesize'></div>
</div>

The image display is ok but when I add displaysize(img) function to the script and button, the page keep loading. I will need to get image size for calculation in my java script file,

document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
        "Rectangle " + (this.rectPointer + 1) + " ("
        + this.startX + ", "
        + this.startY + ", "
        + this.endX + ", "
        + this.endY + ")"

need to change to:

 document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
        "Rectangle " + (this.rectPointer + 1) + " ("
        + (this.startX)/width + ", "
        + (this.startY)/height + ", "
        + (this.endX-this.startX)/width+" , "
        + (this.endY-this.startY)/height +""

Answer 1

Finnaly I managed to find the width and height of the image since it is parent of the rectangular I created inside. So in the javascript file I will use:

var options = {
            width: $('#' + rectangles[rectPointer].rectangleDiv.id).parent().width() + 1,
            height: $('#' + rectangles[rectPointer].rectangleDiv.id).parent().height() - 3
        };

Then width and height get from:

  (options.width ||rectangles[rectPointer].startX)   + " "

options.height ||rectangles[rectPointer].startY

then for my calculation:

Rectangle.prototype.updatePosition = function (data, options) {
    this.startX = data.newStartX;
    this.startY = data.newStartY;
    this.endY   = parseFloat(this.startY) + parseFloat(this.rectangleDiv.style.height);
    this.endX   = parseFloat(this.startX) + parseFloat(this.rectangleDiv.style.width);

    console.log("END: " 
        + parseFloat(this.startY) + parseFloat(this.rectangleDiv.style.height) + " - " + parseFloat(this.startX) + parseFloat(this.rectangleDiv.style.width));

    document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
        "Rectangle " + (this.rectPointer + 1) + " ("
        + (options.width || this.startX) + ", "
        + (options.height || this.startY) + ", "
        + (this.startX)/(options.width || this.startX) + ", "
        + (this.startY)/(options.height || this.startY) + ")"
;

Thanks all for your help ! I have credited up points for all but couldn't accept as answer since it doesn't really be used to solve my issue.