在調整大小後獲取實際圖像大小

我有一個頁面充滿縮略圖，用css調整到150x150，當我點擊縮略圖時，頁面變暗，圖像以真實尺寸顯示。在調整大小後獲取實際圖像大小

目前，我必須手動創建一個包含所有圖像實際高度的數組。爲了解決設計問題+減少手動操作我的圖庫，我需要在調整圖像大小（CSS）後獲取圖像的實際高度。

我想：

var imageheight = document.getElementById(imageid).height;

和：

var imageheight = $('#' + imageid).height();

但都返回與CSS分配150px屬性。我該如何解決這個問題？謝謝

來源

2012-05-07 Novak

的可能重複http://stackoverflow.com/問題/ 7682772 /獲取圖像大小後調整大小 - javascript –

所以你正在加載所有全尺寸的圖像，而不是正確的縮略圖？ ouch ... – Guffa

我正在加載全尺寸的圖像，並在縮略圖被點擊時顯示它。 – Novak

你可以做到的一種方法是創建一個單獨的圖像對象。

function getImageDimensions(path,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
     callback({ 
      width : img.width, 
      height : img.height 
     }); 
    } 
    img.src = path; 
} 

getImageDimensions('image_src',function(data){ 
    var img = data; 

    //img.width 
    //img.height 

});

這樣，您將使用相同的圖像，但不是DOM上修改尺寸的圖像。就我所知，緩存的圖像將使用此方法進行回收。所以不用擔心附加的HTTP請求。

來源

2012-05-07 08:04:58 Joseph

謝謝@約瑟夫，現在工作。 – Novak

你有 '自然' KWS幫助你：

與JS：

var imageheight = document.getElementById(imageid).naturalHeight;

或使用jQuery

var imageheight = $('#' + imageid).naturalHeight;

來源

2012-05-07 11:40:02

偉大的答案，謝謝 – imkost

IE9 +和任何其他主要瀏覽器，這些屬性是有效的。這是一個很好的答案！有人可能會爲此包裝一個jQuery插件。如果沒有，這可能會很有趣。 –

在調整大小後獲取實際圖像大小

回答

相關問題