我正在创建一个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。
当前回答
正如Luke Smith所说，图像加载是一团糟。它在所有浏览器上都不可靠。这个事实给了我极大的痛苦。缓存的图像在某些浏览器中根本不会触发事件，所以那些说“图像加载比setTimeout更好”的人是错误的。
卢克·史密斯的解决方案在这里。
关于如何在jQuery 1.4中处理这些混乱的问题，有一个有趣的讨论。
我发现这是相当可靠的设置宽度为0，然后等待“完成”属性为真，宽度属性来大于零。您还应该注意错误。
其他回答
$("#myImg").one("load",function(){
//do something, like getting image width/height
}).each(function(){
if(this.complete) $(this).trigger("load");
});
来自克里斯的评论:http://api.jquery.com/load-event/
如果图像已经被使用，你应该:
设置图像尺寸为初始值 image.css(“宽度”,“初始”); image.css(“高度”,“初始”); 得到维度 var originalWidth = $(this).width(); var originalHeight = $(this).height();
下面是一个跨浏览器的解决方案，当您所选择的图像加载时触发一个事件:http://desandro.github.io/imagesloaded/您可以在imagesLoaded()函数中查找高度和宽度。
如前所述，如果图像在缓存中，Xavi回答将不起作用。这个问题响应webkit没有对缓存的图像触发加载事件，所以如果在img标签中没有显式设置宽度/高度attrs，唯一可靠的获取图像的方法是等待窗口。加载要触发的事件。
窗外。加载事件总是会触发，所以在没有任何技巧的情况下，访问img的宽度/高度是安全的。
$(window).load(function(){
//these all work
$('img#someId').css('width');
$('img#someId').width();
$('img#someId').get(0).style.width;
$('img#someId').get(0).width;
});
如果需要获取可能被缓存的动态加载图像的大小(以前加载过)，可以使用Xavi方法加上查询字符串来触发缓存刷新。缺点是它将导致对服务器的另一个请求，请求已经缓存并且应该已经可用的img。愚蠢的Webkit。
var pic_real_width = 0,
img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();
$('<img/>').attr('src', img_src_no_cache).load(function(){
pic_real_width = this.width;
});
ps:如果你在img中有一个QueryString。SRC，您将不得不解析它并添加额外的参数来清除缓存。
您可以通过编程方式获取图像，并使用Javascript检查尺寸，而完全不需要处理DOM。
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
