JS快速获取图片宽高的方法

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
    // 只要任何一方大于0
    // 表示已经服务器已经返回宽高
    if(img.width>0 || img.height>0){
        var diff = new Date().getTime() - start_time;
        document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>';
        clearInterval(set);
    }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
    var diff = new Date().getTime() - start_time;
    document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>';
};

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS快速获取图片宽高的方法</title> </head> <body> <script type="text/javascript"> // 记录当前时间戳 var start_time = new Date().getTime(); // 图片地址 var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if(img.width>0 || img.height>0){ var diff = new Date().getTime() - start_time; document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; clearInterval(set); } }; var set = setInterval(check,40); // 加载完成获取宽高 img.onload = function(){ var diff = new Date().getTime() - start_time; document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; }; </script> </body> </html>

提示：你可以先修改部分代码再运行。

http://www.qttc.net/201304304.html

转载请注明：有爱前端 » JS快速获取图片宽高的方法