我正在创建一个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的答案，Paul Irish的github David Desandro的gitgub提供了一个名为imagesLoaded()的函数，它的工作原理相同，并解决了一些浏览器的缓存图像不触发.load()事件的问题(使用聪明的original_src -> data_uri -> original_src切换)。
它被广泛使用并定期更新，这有助于它成为解决问题的最健壮的解决方案。
其他回答
这适用于我(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，其中包括边界和填充。
函数getOriginalWidthOfImg(img_element) { var t = new Image(); T.src = (img_element。getAttribute吗?img_element.getAttribute("src"): false) || 返回t.width; ｝
您不需要从图像或图像维度属性中删除样式。只需用javascript创建一个元素，并获得创建的对象宽度。
现在有一个jQuery插件，event.special。Load，用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
对于不希望更改原始位置或图像的函数。
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
