我正在创建一个jQuery插件。
我如何得到真实的图像宽度和高度与Javascript在Safari?
Firefox 3、IE7和Opera 9的操作如下:
var pic = $("img")
// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
但在Safari和谷歌等Webkit浏览器中，Chrome的值为0。
当前回答
这是跨浏览器的
var img = new Image();
$(img).bind('load error', function(e)
{
$.data(img, 'dimensions', { 'width': img.width, 'height': img.height });
});
img.src = imgs[i];
通过使用得到尺寸
$(this).data('dimensions').width;
$(this).data('dimensions').height;
干杯!
其他回答
最近我需要找到宽度和高度设置默认大小的.dialog表示图形。我使用的解决方案是:
graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
graph.bind('load', function (){
wid = graph.attr('width');
hei = graph.attr('height');
graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
})
对我来说，这适用于FF3, Opera 10, IE 8,7,6
附注:你可能会在一些像LightBox或ColorBox这样的插件中找到更多的解决方案
这适用于我(safari 3.2)，从窗口内发射。onload事件:
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.height() );
});
现在有一个jQuery插件，event.special。Load，用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
函数getOriginalWidthOfImg(img_element) { var t = new Image(); T.src = (img_element。getAttribute吗?img_element.getAttribute("src"): false) || 返回t.width; ｝
您不需要从图像或图像维度属性中删除样式。只需用javascript创建一个元素，并获得创建的对象宽度。
使用HTML5中的naturalHeight和naturalWidth属性。
例如:
var h = document.querySelector('img').naturalHeight;
工作在IE9+， Chrome, Firefox, Safari和Opera(统计)。
