如何獲取圖片的圖片大小加載延遲加載

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調用更容易。