How to get image size loaded by lazy loading

Question

I am using the lazy load plugin (jquery.lazyload.js) and I am trying to get the size of the image 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 fine, but when I add the displayize (img) function to the script button and the page continues to load. I will need to get the 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 + ")"

must be changed 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 , , . javascript :

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

:

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

options.height ||rectangles[rectPointer].startY

:

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) + ")"
;

! , , .

Answer 2

, , /. , .

, , .

function displaysize(img) {
  console.log(img.clientWidth, img.clientHeight);
}

$(function() {
    $("img.lazy").lazyload();
    
    $(document).on('click', '.lazy', function() {
      displaysize($(this)[0]);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>

<img class="lazy" data-original="http://appelsiini.net/img/bmw_m1_hood.jpg" />

Hide result

Answer 3

? ?

, displayize, img, - .

, - , .

:

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

 displaysize(imgID) {

          console.log(document.getElementById(imgID).width + ","+ document.getElementById(imgID).height);
    }        

, , , , . , , , .

Answer 4

:

PRO TIP! You must set the image dimensions both as width and height attributes, and in CSS. Otherwise, the plugin may not work correctly.

I see that you are using PHP, so you can try setting the width and height as indicated in this answer .

You can also add an identifier to the images to facilitate calling javascript from the button.