我正在创建一个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。
当前回答
我已经做了一些变通的实用函数，使用imagesLoaded jquery插件: https://github.com/desandro/imagesloaded
function waitForImageSize(src, func, ctx){
if(!ctx)ctx = window;
var img = new Image();
img.src = src;
$(img).imagesLoaded($.proxy(function(){
var w = this.img.innerWidth||this.img.naturalWidth;
var h = this.img.innerHeight||this.img.naturalHeight;
this.func.call(this.ctx, w, h, this.img);
},{img: img, func: func, ctx: ctx}));
},
你可以通过传递url，函数和它的上下文来使用它。函数在图像加载后执行，并返回创建的图像及其宽度和高度。
waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
其他回答
对于不希望更改原始位置或图像的函数。
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
Jquery有两个属性叫做naturalWidth和naturalHeight，你可以这样使用。
$('.my-img')[0].naturalWidth
$('.my-img')[0].naturalHeight
其中my-img是一个类名，用于选择我的图像。
最近我需要找到宽度和高度设置默认大小的.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这样的插件中找到更多的解决方案
我已经做了一些变通的实用函数，使用imagesLoaded jquery插件: https://github.com/desandro/imagesloaded
function waitForImageSize(src, func, ctx){
if(!ctx)ctx = window;
var img = new Image();
img.src = src;
$(img).imagesLoaded($.proxy(function(){
var w = this.img.innerWidth||this.img.naturalWidth;
var h = this.img.innerHeight||this.img.naturalHeight;
this.func.call(this.ctx, w, h, this.img);
},{img: img, func: func, ctx: ctx}));
},
你可以通过传递url，函数和它的上下文来使用它。函数在图像加载后执行，并返回创建的图像及其宽度和高度。
waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
另一个建议是使用imagesLoaded插件。
$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
