如何獲得隱藏圖像的高度？

當div被隱藏時（display:none），瀏覽器將不會加載其中的圖像。 有沒有辦法告訴瀏覽器加載圖像？我需要圖像的高度和寬度來做一些預處理。如何獲得隱藏圖像的高度？

注意：由於其他一些代碼，我無法使div可見。 Check the example here。另外一個「懶加載」的例子不適合我。

2011-01-31 Kees C. Bakker

我已經添加了一些預加載，將其封裝到一個函數中，並做到這一點：

function getImageDimension(el, onReady) {  
    var src = typeof el.attr === 'function' ? el.attr('src') : el.src !== undefined ? el.src : el; 

    var image = new Image(); 
    image.onload = function(){ 
     if(typeof(onReady) == 'function') { 
      onReady({ 
       width: image.width, 
       height: image.height 
      }); 
     } 
    }; 
    image.src = src; 
}

可作爲：

getImageDimension($('#img1'), function(d){ alert(d.height); }); 
var url = 'http://urology.jhu.edu/patrickwalsh/photo1.jpg'; 
getImageDimension(url, function(d){ alert(d.height); });

來源

2011-01-31 15:14:14

使股利可見，但與position: absolute;在頁面突出位置。

如果你的「其他代碼」不會讓你這樣做要麼，創建一個新的形象節點具有相同的URL，在頁面外的位置，等到它的加載，讀取其高度和破壞。

來源

2011-01-31 13:33:28

+1良好快速的解決方案:) – Sarfraz 2011-01-31 13:34:32

你的第一個解決方案並沒有爲我工作，但第二個解決方案聽起來前途。你有我的代碼示例嗎？ – 2011-01-31 13:40:53

你可以嘗試預加載使用jQuery的圖像 - 看看這個蘇答案：

Preloading images with jQuery

這應該預先加載它們之前，你甚至決定顯示它們。

來源

2011-01-31 13:34:17 xil3

看看這個話題。

Don't load hidden images

來源

2011-01-31 13:35:53 aruseni

我認爲，這只是物品，其父母爲「顯示：無」真

請參閱本文就此事http://dev.jquery.com/ticket/125

而且，看到這個例子（另存爲。 HTML文件）

<html> 
<head> 
<title>Example</title> 



<script type="text/javascript"> 
    $(document).ready(function(){ 
     alert($("#target").height()); 
    }); 
</script> 
</head> 

<body> 
    <div id="parent" style="display:none;"> 
    <div id="target" style="height:100px;display:block;"> 
     a 
    </div> 
</div> 
</body> 
</html>

來源

2011-01-31 13:38:39 enthusiastic

如何獲得隱藏圖像的高度？

回答

相關問題