在实际情况中我们设置了图片大小,比如我们设置了 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();