Question

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

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

</script>


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

Java脚本：

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

HTML：

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

图像显示正常但是当我向脚本和按钮添加displayize（img）功能时，页面会继续加载。我需要在我的java脚本文件中获取用于计算的图像大小，

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

需要更改为：

{{1}}

Answer 1

As I said in the comments, 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.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

相对于延迟加载图像的显示大小按钮在哪里？每个延迟加载图像是否都有一个显示大小按钮，或者只有一个延迟加载的图像？

你的问题是你的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 3

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

专业提示！您必须将图像尺寸设置为宽度和高度属性或CSS。否则插件可能无法正常工作。

我发现您使用的是PHP，因此您可以尝试按this answer中的建议设置宽度和高度。

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

Answer 4

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

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

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

4 个答案: