如何在图片加载完成前获取到图片宽高

当后台没有传入图片宽高，如何实现图片未加载完之前实现提前占位？
换言之--如何在图片加载完成前获取到图片宽高？
1、普通实现代码：
缺点：图片加载完毕才获得尺寸，初次响应速度慢

var imgload=function(url,callback){
	var img=new Image();
	img.src=url;
	if(img.complete){
		//图片是否存在缓存
		callback.call(img);
		return;
	}
	img.onload=function(){
		callback.call(img);
	}
}
var printInfo=function(){
	console.log(this.width,this.height);
}
var imgsrc=document.getElementById("img").getAttribute("src");
imgload(imgsrc,printInfo);

　

2、改进：
浏览器在加载图片时，会获得到图片的头部数据，我们通过setInterval定时器获取图片尺寸状态即可

var src=document.getElementById("pic").getAttribute("src");
var pic=document.getElementById("pic");
var timer=setInterval(takePlace(src),50);
function takePlace(src){
	var img=new Image();
	img.src=src;
	if(img.width>0||img.height>0){
		pic.style.width=500+"px";
		pic.style.height=(500/img.width)*img.height+"px";
		alert(pic.style.width);
		clearInterval(timer);
	}
}

　　

3、优化：
解决兼容性与性能问题

// 更新：
// 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身
// 04-02: 1、增加图片完全加载后的回调 2、提高性能

/**
 * 图片头数据加载就绪事件 - 更快获取图片尺寸
 * @version    2011.05.27
 * @author    TangBin
 * @see        http://www.planeart.cn/?p=1121
 * @param    {String}    图片路径
 * @param    {Function}    尺寸就绪
 * @param    {Function}    加载完毕 (可选)
 * @param    {Function}    加载错误 (可选)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
        alert('size ready: width=' + this.width + '; height=' + this.height);
    });
 */
var imgReady = (function () {
    var list = [], intervalId = null,

    // 用来执行队列
    tick = function () {
        var i = 0;
        for (; i < list.length; i++) {
            list[i].end ? list.splice(i--, 1) : list[i]();
        };
        !list.length && stop();
    },

    // 停止所有定时器队列
    stop = function () {
        clearInterval(intervalId);
        intervalId = null;
    };

    return function (url, ready, load, error) {
        var onready, width, height, newWidth, newHeight,
            img = new Image();
        
        img.src = url;

        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
            ready.call(img);
            load && load.call(img);
            return;
        };
        
        width = img.width;
        height = img.height;
        
        // 加载错误后的事件
        img.onerror = function () {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };
        
        // 图片尺寸就绪
        onready = function () {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 如果图片已经在其他地方加载可使用面积检测
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();
        
        // 完全加载完毕的事件
        img.onload = function () {
            // onload在定时器时间差范围内可能比onready快
            // 这里进行检查并保证onready优先执行
            !onready.end && onready();
        
            load && load.call(img);
            
            // IE gif动画会循环执行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };

        // 加入队列中定期执行
        if (!onready.end) {
            list.push(onready);
            // 无论何时只允许出现一个定时器，减少浏览器性能损耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();