IE下img.onload无法获取图片宽高的问题

某日写代码的时候，发现img.onload中无法获取图片的宽度和高度，代码如下：

<img src="" style="display:none">
<button>click me</button>

<script>
var img = document.getElementsByTagName('img')[0];
var button = document.getElementsByTagName('button')[0];

button.onclick = function(){
    img.onload = function(){
        alert(this.width + 'x' + this.height);
    };
    img.src = 'chrome.jpg';
    return false;
}
</script>

最后得到的结果是“0x0”。经查资料，终于找到原因，在IE下，对于display:none的图片，是无法获取其width和height属性的。

知道了这一点后，我们可以有几种方法去解决这个问题：

1.在取图片的宽和高前，先设置图片为display:block。

2.如果你实在不想让图片显示出来，可以使用new Image()来加载，效果非常好。

3.冷门方法，虽然不能display:none，但可以用visibility:hidden嘛。但是它会占用页面的位置呀，那怎么办呢？再设置position:absolute;z-index:-100;让其脱离页面流，再置于底层不影响用户操作呗。但这样搞太蛋疼，不推荐。。。

 

 

 

转载于:https://www.cnblogs.com/lefeng/archive/2013/03/05/2944351.html