javascript - How get image size of image loaded by lazy load - Stack Overflow

admin管理员组

文章数量:1416642

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

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

• javascript
• jquery
• lazy-loading
• jquery-lazyload

Share Improve this question Follow edited Jun 22, 2017 at 9:15 user1314404 asked Jun 13, 2017 at 8:22 user1314404user1314404 1,30544 gold badges2424 silver badges5555 bronze badges 3

• You aren't passing an argument towards the function displaysize which cleary expects one named img – DarkBee Commented Jun 15, 2017 at 8:42
• you mean this? <button id='map-download-btn' onclick='displaysize(img);' >Image size:</button> – user1314404 Commented Jun 15, 2017 at 8:48
• do you need a JavaScript client-side solution, or can you set the width/height attributes with PHP? – deblocker Commented Jun 22, 2017 at 5:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

As I said in the ments, you need to pass the image to the function in order to fetch the width/height. In this example you can click the image to get the size.

In order to use a button you would need to use a selector to target the right image you want the dimensions of.

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>

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

Where is the display size button relative to your lazy loaded image? Does each lazy load image have a display size button or is there only one lazy loaded image?

Your problem is that your displaysize method which uses a parameter called img but you do not pass any parameter when you call the function on click.

So you need to pass something to that display size method which will point it to the correct image.

Of your image is like this relative to your button:

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

If you do not have a static set up like this depending on the questions i asked at the beginning here you will have to adjust this code. However whatever the case you will be able to do this by passing an actual reference of the image you would like to inspect to your display image size method.

According to lazy loading plugin site you need to set image dimensions before loading the image:

PRO TIP! You must set image dimensions either as width and height attributes or in CSS. Otherwise plugin might not work properly.

I see you are using PHP, so you can try to set width and height as advised in this answer.

You can also add an id to your images to make the javascript call from the button easier.

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.

本文标签： javascriptHow get image size of image loaded by lazy loadStack Overflow