我正在创建一个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)
其他回答
$(document).ready(function(){
var image = $("#fix_img");
var w = image.width();
var h = image.height();
var mr = 274/200;
var ir = w/h
if(ir > mr){
image.height(200);
image.width(200*ir);
} else{
image.width(274);
image.height(274/ir);
}
});
//此代码帮助显示200*274维度的图像
无意中发现了这条线索，试图为我自己的问题找到答案。我试图在加载程序后的函数中获得图像的宽度/高度，并不断得到0。我觉得这可能就是你想要的，因为这对我来说很管用:
tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);
function preloader() {
imagesLoaded++;
if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
DetachEvent(this, 'load', preloader); //function that removes event listener
drawItems();
}
}
function drawItems() {
for(var i = 1; i <= xmlProjectInfo.length; i++)
alert(xmlProjectInfo[i - 1].image[0].width);
}
这适用于我(safari 3.2)，从窗口内发射。onload事件:
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.height() );
});
根本问题是WebKit浏览器(Safari和Chrome)并行加载JavaScript和CSS信息。因此，JavaScript可能在计算CSS的样式效果之前执行，返回错误的答案。在jQuery中，我发现解决方案是等到文档。readyState == 'complete'，例如，
jQuery(document).ready(function(){
if (jQuery.browser.safari && document.readyState != "complete"){
//console.info('ready...');
setTimeout( arguments.callee, 100 );
return;
}
... (rest of function)
至于宽度和高度……根据你正在做的事情，你可能需要offsetWidth和offsetHeight，其中包括边界和填充。
为了补充Xavi的答案，Paul Irish的github David Desandro的gitgub提供了一个名为imagesLoaded()的函数，它的工作原理相同，并解决了一些浏览器的缓存图像不触发.load()事件的问题(使用聪明的original_src -> data_uri -> original_src切换)。
它被广泛使用并定期更新，这有助于它成为解决问题的最健壮的解决方案。
