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

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

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

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

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

Answer 2

相对于延迟加载的图片，显示尺寸按钮在哪里？是每张延迟加载图片都有显示尺寸按钮还是只有一张延迟加载图片？

你的问题是你的 displaysize 方法使用了一个名为 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 3

根据延迟加载插件站点，您需要在加载图像之前设置图像尺寸：

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

我看到您正在使用 PHP，因此您可以尝试按照 this answer 中的建议设置宽度和高度。

您还可以为图像添加一个 ID，以便更轻松地从按钮调用 javascript。

Answer 4

最后我设法找到了图像的宽度和高度，因为它是我在内部创建的矩形的父级。所以在 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) + ")"
;

感谢大家的帮助！我已经记下了所有的分数，但不能接受作为答案，因为它并没有真正用于解决我的问题。

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

How get image size of image loaded by lazy load

javascript

jquery

lazy-loading

jquery-lazyload