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

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

5 个答案: