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

Question

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

注意：由於其他一些代碼，我無法使div可見。 在這里查看示例。 此外，“懶惰負載”示例對我不起作用。

Answer 1

使div可見，但將其放在頁面外的position: absolute; 。

如果您的“其他代碼”也不允許您這樣做，請創建一個具有相同URL的新圖像節點，將其放置在頁面外部，等待它加載，讀取其高度並銷毀。

Answer 2

我已經添加了一些預加載，將它包裝到一個函數中，這就是訣竅：

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); });

Answer 3

您可以嘗試使用jquery預加載圖像 - 請查看此SO答案：

使用jQuery預加載圖像

這應該在您決定顯示之前預先加載它們。

Answer 4

看看這個帖子。

不要加載隱藏的圖像

Answer 5

我相信這只適用於父級為“display：none”的項目

請參閱有關此問題的文章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>

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

問題描述

5 個解決方案

解決方案1
4 2011-01-31 13:33:28

解決方案2
4 已采納 2011-01-31 15:14:14

解決方案3
3 2011-01-31 13:34:17

解決方案4
0 2011-01-31 13:35:53

解決方案5
0 2011-01-31 13:38:39

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

問題描述

5 個解決方案

解決方案1 4 2011-01-31 13:33:28

解決方案2 4 已采納 2011-01-31 15:14:14

解決方案3 3 2011-01-31 13:34:17

解決方案4 0 2011-01-31 13:35:53

解決方案5 0 2011-01-31 13:38:39

解決方案1
4 2011-01-31 13:33:28

解決方案2
4 已采納 2011-01-31 15:14:14

解決方案3
3 2011-01-31 13:34:17

解決方案4
0 2011-01-31 13:35:53

解決方案5
0 2011-01-31 13:38:39