在实际情况中我们设置了图片大小,比如我们设置了 400 * 300 但实际的图片大小是 1300 * 1000 那我们怎么获取这个实际的大小呢。
1
2
3
在原生js 中可以通过  
nWidth = document.getElementById('example').naturalWidth,
nHeight = document.getElementById('example').naturalHeight;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 (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));

使用方法:

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