图片 加载获取宽高问题

我们经常遇到获取图片宽高的问题。有时候我们获取的图片宽高为0.这是因为当我们获取图片宽高时，图片还未加载完成造成的，。

我们可以采用window.onload之后在获取。但是这样我们只有第一次进入页面时才会触发。所以我们采用图片的onload事件；

首先我们需要创建一个img对象

var img = new Image();

img.onload = function () {

　　console.log(img.width,img.height)

　　//这里获取就是图片的原始宽高。。

　　//如果我们想获取图片在dom节点中的宽高需要我们先把img对象加入文档；

　　// 如  $('div").append(img)

　　//console.log(img.width,img.height)这里是图片在html中的宽高；

}

img.src = "test.jpeg"；

。。

至于为什么

最初的代码如下：

var img = new Image;    

img.src = "test.gif";    

img.onload = function(){        

alert ( img.width );    

};

这段代码看着没什么问题，但是为什么onload没有被IE调用呢？因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢？我于是我测试了以下代码，成功了～

var img = new Image;    

img.onload = function(){        

alert ( img.width );     };    

img.src = "test.gif";

 

//

//

同时ie有时候会给没有设置图片属性的图片加上图片的原始尺寸。。

通常解决的办法先给img设置 width： auto  height：auto；

这种方法；

 

多张图片的加载与以上原理相似。

var imgArr = ['test1.jpg','test2.jpg','test3.jpg','test4.jpg','test5.jpg','test6.jpg']
var num = 1;
for(var i = 0; i < imgArr.length; i ++) {
　　var img = new Image();
　　img.onload = function () {
　　　　if(num == imgArr.length) {
　　　　　　alert('图片全部加载完成')
　　　　} else {
　　　　　　num ++;
　　　　}
　　}
　　img.src = imgArr[i];
}

..