獲取動態圖像的寬度和高度

我有一個嵌入隱藏div內的img標籤。當用戶點擊具有圖像名稱的動態超鏈接時，圖像必須在模態窗口中顯示。爲了在模式窗口內定位div，圖像高度是必需的。但是當超鏈接被點擊時，在src被分配之後，高度變爲0.因此圖像不能在中間對齊。在圖像顯示在瀏覽器中之前，請幫助我獲取圖像的寬度。獲取動態圖像的寬度和高度

<div id="imgFullView" class="modal_window imgFullView"> 
    <img alt="Loading..." id="imgFull" /> 
</div> 

function ShowImage(imgSrc) { 
    $("#imgFull").attr("src", imgSrc); 
    alert($("#imgFull").height()); 
    $("#imgFullView").width($("#imgFull").width()); 
    $("#imgFullView").height($("#imgFull").height()); 
    show_modal('imgFullView', true); 
}

此showimage方法將被稱爲onclick的超鏈接。在此先感謝...這工作對我來說，烏拉圭回合後所有專業指導

解決方案...

function ShowImage(imgSrc) { 
    $("#imgFull").removeAttr("src"); //To remove the height and width of previously showed imaged from img tag. 
    $("#imgFull").attr("src", imgSrc); 
    $("#imgFullView").width(document.getElementById("imgFull").width); 
    $("#imgFullView").height(document.getElementById("imgFull").height); 
    show_modal('imgFullView', true); 
}

來源

2011-07-07 Raghav

試試這個。

var img = $("imgFull")[0]; // Get my img elem 
    var real_width, real_height; 
    $("<img/>") // Make in memory copy of image to avoid css issues 
     .attr("src", $(imgFull).attr("src")) 
     .load(function() { 
      real_width = this.width; // Note: $(this).width() will not 
      real_height = this.height; // work for in memory images. 
     });

謝謝。

來源

2011-07-07 05:51:02 Chandresh

嗯，問題是，你可以不知道的不是招圖像的大小尚未裝入。試試這個：

function ShowImage(imgSrc) { 
    $("#imgFull").attr("src", imgSrc); 
    $("#imgFull").load(function(){ //This ensures image finishes loading 
    alert($("#imgFull").height()); 
    $("#imgFullView").width($("#imgFull").width()); 
    $("#imgFullView").height($("#imgFull").height()); 
    show_modal('imgFullView', true); 
    }); 
}

隨着我們保證圖像完試圖得到它的大小（）

希望這有助於之前加載。乾杯

來源

2011-07-07 05:48:58

$（「＃imgFull」）高度（）將返回0，當圖像被隱藏，你必須使用原生js來獲得高度/寬度 –

你是正確的，但有點錯誤..但DR。莫爾的想法給了我一個主意。實際上，當我嘗試document.getelementbyid（）。寬度時，在.load（）之前它不是0。它有一個價值。因爲它是隱藏的，所以width（）給出了0.這個部分絕對是太棒了。我用本地js來獲取寬度。而對於動態加載，我已經刪除了src attr並再次添加它來拒絕由preivous圖像設置的寬度。 – Raghav

這爲我在過去的工作：

function ShowImage(imgSrc){ 
$('<img id="imgFull" />').bind('load', 
    function(){ 
     if (!this.complete || this.naturalWidth == 0) { 
      $(this).trigger('load');  
     } else { 
      $(this).appendTo('#imgFullView') 
$('#imgFullView').width(this.naturalWidth).height(this.naturalHeight); 
     }  
    }).attr("src",imgSrc); 
} 

$(document).ready(function(){ ShowImage('http://www.google.com/images/logos/ps_logo2.png') });

演示在這裏：

http://jsfiddle.net/jyVFc/4/

來源

2011-07-07 06:08:04

謝謝...但這個.naturalWidth在IE中是未定義的.. – Raghav

如果我們使用this.width，答案是正確的。但它有額外的邏輯加載圖像在內存中使用jquery只是抓住寬度，當它已經在img標籤的this.width。但是，this.width是我想要的確切解決方案... – Raghav

啊，好吧，我其實也誤讀了你的問題。很高興Chandresh能夠給你你正在尋找的答案，雖然:) –

獲取動態圖像的寬度和高度

回答

相關問題