我正在创建一个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。
当前回答
如前所述，如果图像在缓存中，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，您将不得不解析它并添加额外的参数来清除缓存。
其他回答
如前所述，如果图像在缓存中，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，您将不得不解析它并添加额外的参数来清除缓存。
这对缓存的和动态加载的图像都有效。
function LoadImage(imgSrc, callback){
var image = new Image();
image.src = imgSrc;
if (image.complete) {
callback(image);
image.onload=function(){};
} else {
image.onload = function() {
callback(image);
// clear onLoad, IE behaves erratically with animated gifs otherwise
image.onload=function(){};
}
image.onerror = function() {
alert("Could not load image.");
}
}
}
使用此脚本:
function AlertImageSize(image) {
alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);
演示:http://jsfiddle.net/9543z/2/
那么形象呢?naturalHeight和image。naturalWidth属性呢?
在Chrome、Safari和Firefox的一些版本中似乎都运行得很好，但在IE8甚至IE9中就完全不行。
我们如何在不眨眼的情况下获得正确的真实尺寸:
(function( $ ){
$.fn.getDimensions=function(){
alert("First example:This works only for HTML code without CSS width/height definition.");
w=$(this, 'img')[0].width;
h=$(this, 'img')[0].height;
alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
//This is bad practice - it shows on your monitor
$(this, 'img')[0].removeAttribute( "width" );
$(this, 'img')[0].removeAttribute( "height" );
alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+ $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
//I'am going to repare it
$(this, 'img')[0].width=w;
$(this, 'img')[0].height=h;
//This is a good practice - it doesn't show on your monitor
ku=$(this, 'img').clone(); //We will work with a clone
ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
ku[0].removeAttribute( "width" );
ku[0].removeAttribute( "height" );
//Now we still get 0
alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
//Hide a clone
ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});
//A clone appending
$(document.body).append (ku[0]);
alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
//Remove a clone
$("#mnbv1lk87jhy0utrd").remove();
//But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object
imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy
$(document.body).append (imgcopy);//append to document
alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
$("#mnbv1lk87jhy0aaa").remove();
}
})( jQuery );
$(document).ready(function(){
$("img.toreaddimensions").click(function(){$(this).getDimensions();});
});
<img class="toreaddimensions"…
关于从WebKit缓存加载图像时onload事件不会触发的问题，在已接受的回答中有很多讨论。
在我的例子中，onload触发了缓存图像，但高度和宽度仍然为0。一个简单的setTimeout解决了我的问题:
$("img").one("load", function(){
var img = this;
setTimeout(function(){
// do something based on img.width and/or img.height
}, 0);
});
我不能说为什么onload事件即使从缓存加载图像时也会触发(改进了jQuery 1.4/1.5?) -但如果你仍然遇到这个问题，可能是我的答案和var src = img.src;img。SRC = "";img。SRC = SRC;技巧是有用的。
(请注意，就我的目的而言，我不关心图像属性或CSS样式中的预定义维度——但根据Xavi的回答，您可能想要删除这些维度。或者克隆图像。)
