我们往往有这样的需求，我们需要先图像的高度和宽度，然后做后续的处理。比较普遍的做法是等到图片的onload事件发生后再去得到图片的高度和宽度的。现在的问题是，图像的高度和宽度一定要在图像加载完之后才能得到吗？答案是否定的。浏览器在图片数据返回的时候就能知道图像的高度和宽度，只是我们不知道。可以用下面的例子证明：
html:
<html>
<body>
<div id="panel"></div>
<script src="testify.js"></script>
</body>
</html>
<body>
<div id="panel"></div>
<script src="testify.js"></script>
</body>
</html>
js:
window.onload = function() {
//var img = document.getElementById('testImg');
var img=new Image();
img.src = 'https://www.google.com.hk/images/nav_logo114.png?t=' + (new Date()).getTime();
intervalId = setInterval(function() {
if(img.width&&img.height){
clearInterval(intervalId);
document.getElementById('panel').innerHTML=document.getElementById('panel').innerHTML+","+(img.width+"-"+img.height);
}
}, 10);
img.onload=function(){
document.getElementById('panel').innerHTML=document.getElementById('panel').innerHTML+",loaded"
}
}
//var img = document.getElementById('testImg');
var img=new Image();
img.src = 'https://www.google.com.hk/images/nav_logo114.png?t=' + (new Date()).getTime();
intervalId = setInterval(function() {
if(img.width&&img.height){
clearInterval(intervalId);
document.getElementById('panel').innerHTML=document.getElementById('panel').innerHTML+","+(img.width+"-"+img.height);
}
}, 10);
img.onload=function(){
document.getElementById('panel').innerHTML=document.getElementById('panel').innerHTML+",loaded"
}
}
输出：
如果图片较大，较多，而且又要尽早的得到图片的大小，下面这篇博客提供了这样的方法，原理与上面的简单代码一样--用计时器不断检测图片的高度和宽度是否已经得到