5

我正在使用延迟加载插件（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 +""
4

4 回答 4

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

于 2017-06-15T09:31:13.353 回答
1

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

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

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

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

于 2017-06-21T23:53:26.697 回答
1

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

您的问题是您的 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);
    }

如果您没有像这样的静态设置，这取决于我在这里开始时提出的问题，您将不得不调整此代码。但是，无论哪种情况，您都可以通过将您想要检查的图像的实际参考传递给您的显示图像大小方法来做到这一点。

于 2017-06-21T09:35:04.363 回答
0

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

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

于 2017-06-22T09:11:37.483 回答