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

原文：http://www.css88.com/archives/5224

// 记录当前时间戳
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 += '
from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
';
        clearInterval(set);
    }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
    var diff = new Date().getTime() - start_time;
    document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
};

eg:

var src = $(this).attr('src');
                if (src && src != '') {                    
                    var w, h;
                    var img_url = (src.indexOf("http://") < 0 ? location.href : "") + src + '?' + (new Date().getTime()); // 图片地址
                    var img = new Image(); // 创建对象                  
                    img.src = img_url; // 改变图片的src  
                    // 定时执行获取宽高  
                    var check = function () {
                        // 只要任何一方大于0,表示已经服务器已经返回宽高  
                        if (img.width > 0 || img.height > 0) {
                            w = img.width;
                            h = img.height;
                            clearInterval(set);
                        }
                    };

                    var set = setInterval(check, 40);
                    // 加载完成获取宽高,并弹出  
                    img.onload = function () {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: [img.width + 'px', img.height + 'px'],
                            skin: 'layui-layer-nobg',
                            shadeClose: true,
                            content: '<img style="display:block;" style="overflow: hidden;" src="' + src + '">'
                        });
                    };
                };