如何在IE中更改src後得到新的圖像大小

我有一個圖像元素與微調gif。我後來用jQuery動態地改變了圖像的src，我想獲得新圖像的實際寬度和高度。這裏是我的代碼：如何在IE中更改src後得到新的圖像大小

function loadImage() { 
$('#uploaded-image').load(function() { 
    var img = document.getElementById('uploaded-image'); 

      // These statements return the correct values in FF and Chrome but not IE 
    imgWidth = img.clientWidth; 
    imgHeight = img.clientHeight; 
}); 
$('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl); 
}

這在Chrome和Firefox中完美的工作，但IE總是返回原始微調框gif，而不是新圖像的大小。

如何在IE中獲得新圖像的寬度和高度？

注：

我已經試過了jQuery .WIDTH（）和.height（）除了純JavaScript的方式方法，具有相同的結果。

在所有瀏覽器中按預期正在觸發.load事件。

來源

2011-09-22 bestattendance

什麼是真正奇怪的是，在IE瀏覽器的開發者工具檢查DOM屬性時，即使是那些顯示原來的微調大小，而不是新的圖像的大小。 – bestattendance

在IE開發者工具（F12）中，你需要按下那個小小的刷新到DOM獲得更新 – Mohsen

您可以創建一個隱藏的div並將圖像放在那裏以獲取大小。只要確保隱藏的div不是用display:none完成的，因爲那樣它就沒有尺寸。使用visibility:hidden，抓住尺寸，然後將其取出。

來源

2011-09-22 15:56:42 maxedison

請確保您刪除的CSS的高度和寬度，以及：

$('#uploaded-image').css({ height: "auto", width: "auto" });

來源

2011-09-22 15:58:47 gilly3

使用offsetHeight和offsetWidth在IE中。

檢查了這一點在你的IE：http://jsbin.com/abopih/5

var imgUrl = "http://www.google.com/intl/en_com/images/srpr/logo3w.png"; 
var img = document.getElementById('uploaded-image'); 
$('#uploaded-image').click(function() { 
    imgWidth = img.clientWidth; 
    imgHeight = img.clientHeight; 
    $('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl); 
     console.info('clientWidth: ', img.clientWidth); 
     console.info('clientHeight: ', img.clientHeight); 
     console.info('offsetWidth: ', img.offsetWidth); 
     console.info('offsetWidth: ', img.offsetWidth); 
});

來源

2011-09-22 15:59:17 Mohsen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<input type="file" id="file" /> 
<script type="text/javascript" charset="utf-8"> 
$("#file").change(function(e) { 
    var file, img; 
    file = document.getElementById("file"); 
    if (file!=null) { 
     img = new Image(); 
     img.src = file.value; 
     img.onload = function() { 
      alert(img.width + " " + img.height); 
     }; 
     img.onerror = function() { 
      alert("not a valid file: " + file.type); 
     }; 
    } 

}); 
</script>

來源

2013-09-09 07:30:15

這似乎是一個緩存的問題。

添加到您的圖片來源網址：

imgUrl += new Date().getTime();

來源

2013-10-29 22:25:23 Sergio

如何在IE中更改src後得到新的圖像大小

回答

相關問題