如何獲得一系列圖像的累積高度？

我正在嘗試使用JS和PHP來指示某些導航是否可見或不可見。首先，我得到一系列圖像的累積高度。然後我將這個高度與它們的容器高度進行比較。如果圖像的高度較大，則應顯示導航格。如何獲得一系列圖像的累積高度？

這幾乎可以工作，但由於某種原因，我的JS變量'divheight'沒有收集圖像高度。任何人都能發現我的問題嗎

請注意，$ count是圖像的數量，#th_將等於最終圖像的ID。

<script> 
    $('#th_<?php echo $count; ?>').ready(function() { 
     var divheight = 0; 
     //alert('Number of images: <? echo $count; ?>'); 
     <?php 
     $msg = ''; 
     for ($i = 1; $i <= $count; $i++) { 
      ?>//alert('Cumulative height of images: 'divheight); <? 
      //$msg .= 'divheight += parseInt($("#th_' . $i . '").height());'; 
      $msg .= 'divheight += parseInt(document.getElementById("th_' . $i . '").height);';// . "\n"; 
     } 
     echo $msg; 
     ?> 
     //alert('<? echo $msg; ?>'); 
     alert(divheight + ':' + $('#ThumbContainer').height()); 
     if (divheight < $('#ThumbContainer').height()) { 
      $("#ProdDetailsHoverUp").hide(); 
      $("#ProdDetailsHoverDown").hide(); 
     } 
    }); 
</script>

請注意，我已經使用JQuery和DOM方法獲取圖像的高度。

在此先感謝您的幫助。

來源

2012-03-13 jmealy

你可以添加PHP腳本的解析版本呢？ – chrisn 2012-03-13 22:57:25

我不相信圖像按順序加載，所以最好不要依賴「最後」圖像ID作爲「所有」圖像已加載的指示符。 – anson 2012-03-13 23:04:00

據jQuery的文檔，你可以不準備事件附加到任何東西，但「文件」和你應該使用.load（）來代替。

但是，根據實際腳本的應用情況，您需要先等待所有圖像加載，然後才能安全地使用每個圖像的高度值，因爲如果圖像尚未加載，它將爲零。在這個階段DOM開始準備不會對你有所幫助。

來源

2012-03-13 23:13:52 margusholland

感謝您的反饋。你釘了它。我將'.ready'轉換爲'.load'，一切都很好。 PHP安裝程序允許我確保在JS運行之前加載最後一張圖片。你統治。 – jmealy 2012-03-13 23:39:15

如果你願意，你也許可以用javascript來完成這個任務。假設你想通過#ThumbContainer選擇容器中的所有圖像的總高度，你可以使用：

var divheight = 0; 
$('#ThumbContainer img').each(function() { 
    divheight += $(this).height(); 
}); 
alert(divheight);

來源

2012-03-13 23:01:45 rjz

可能會考慮使用getimagesize()並通過總到一個js變量中獲得在PHP中的圖像大小，或在PHP中添加一個類的容器，這將使他們隱藏的頁面加載

http://php.net/manual/en/function.getimagesize.php

來源

2012-03-13 23:23:55 charlietfl

如何獲得一系列圖像的累積高度？

回答

相關問題