邢栋博客

1.onload

// 图片地址 后面加时间戳是为了避免缓存

var img_url = 'http://www.xingdong365.com/content/uploadfile/201308/3b3e1376105614.jpg?'+Date.parse(new Date());

// 创建对象

var img = new Image();

// 改变图片的src

img.src = img_url;

// 加载完成执行

img.onload = function(){

    // 打印

    alert('width:'+img.width+',height:'+img.height);

};

2.通过complete与onload一起混合使用

// 图片地址

var img_url = 'http://www.xingdong365.com/content/uploadfile/201308/3b3e1376105614.jpg';

// 创建对象

var img = new Image();

// 改变图片的src

img.src = img_url; 

// 判断是否有缓存

if(img.complete){

    // 打印

    alert('from:complete : width:'+img.width+',height:'+img.height);

}else{

    // 加载完成执行

    img.onload = function(){

        // 打印

        alert('from:onload : width:'+img.width+',height:'+img.height);

    };

}

3.通过定时循环检测获取

// 图片地址

var img_url = 'http://www.xingdong365.com/content/uploadfile/201308/3b3e1376105614.jpg?'+Date.parse(new Date());

// 创建对象

var img = new Image();

// 改变图片的src

img.src = img_url;

// 定时执行获取宽高

var check = function(){

    document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+'</div>';

};

var set = setInterval(check,40);

// 加载完成获取宽高

img.onload = function(){

    document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+'</div>';

    // 取消定时获取宽高

    clearInterval(set);

};