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

Question

我正在使用lazy加载插件（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> 

的图像显示是好的，但是当我添加显示尺寸（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

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

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

Answer 2

正如我在评论中说，您需要将图像传递给函数以获取宽度/高度。在这个例子中，你可以点击图片来获得大小。

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

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 3

哪里是相对于你的懒加载图像的显示尺寸按钮？ 每个懒加载图像是否有一个显示大小按钮或只有一个懒加载的图像？

您的问题是您的显示方法使用称为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 4

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

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

我看到您使用PHP，所以您可以尝试设置宽度和高度，建议在this answer。

您还可以添加一个id到您的图像，使按钮的JavaScript调用更容易。