JQ获取图片的实际尺寸

在实际情况中我们设置了图片大小，比如我们设置了 400 * 300 但实际的图片大小是 1300 * 1000 那我们怎么获取这个实际的大小呢。

在原生js 中可以通过  
nWidth = document.getElementById('example').naturalWidth,
nHeight = document.getElementById('example').naturalHeight;

在JQ 中可以通过封装natural来实现

 (function($){
    var props = ['Width', 'Height'],
        prop;
    while (prop = props.pop()) {
        (function (natural, prop) {
            $.fn[natural] = (natural in new Image()) ? 
            function () {
                return this[0][natural];
            } : 
            function () {
                var node = this[0],
                    img,
                    value;
                if (node.tagName.toLowerCase() === 'img') {
                    img = new Image();
                    img.src = node.src,
                    value = img[prop];
                }
                return value;
            };
        }('natural' + prop, prop.toLowerCase()));
    }
}(jQuery));

使用方法：

$("#a").naturalWidth();
$("#a").naturalHeight();