javascript - 如何获取延迟加载加载的图像的图像大小

Question

我正在使用延迟加载插件 (jquery.lazyload.js) 并尝试获取它加载的图像大小。所以在显示部分我有:

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

Java 脚本:

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

图像显示正常，但是当我将 displaysize(img) 函数添加到脚本和按钮时，页面继续加载。我需要在我的 java 脚本文件中获取用于计算的图像大小，

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

需要更改为:

 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

正如我在评论中所说，您需要将图像传递给函数以获取宽度/高度。在此示例中，您可以单击图像以获取尺寸。

为了使用按钮，您需要使用选择器来定位您想要其尺寸的正确图像。

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