如何在IE中更改src后获取新的图像大小

Question

我有一个带有旋转 gif 的图像元素。后来我用 jQuery 动态更改该图像的 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 中获取新图像的宽度和高度？

注释：

除了纯 Javascript 方法之外，我还尝试了 jQuery .width() 和 .height() 方法，得到了相同的结果。

.load 事件在所有浏览器中都按预期触发。

Answer 1

在 IE 中使用 offsetHeight 和 offsetWidth。

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

Answer 2

您可以创建一个隐藏的 div 并将图像放置在那里以获得尺寸。只需确保隐藏的 div 未使用 display:none 完成，因为这样它将没有尺寸。使用 visibility:hidden，获取尺寸，然后将其删除。

Answer 3

确保您也删除了 css 高度和宽度：

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

Answer 4

<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>

Answer 5

看来是缓存问题。

将其添加到您的图像源网址：

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