我正在创建一个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。
当前回答
根本问题是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，其中包括边界和填充。
其他回答
对于不希望更改原始位置或图像的函数。
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
现在有一个jQuery插件，event.special。Load，用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
那么形象呢?naturalHeight和image。naturalWidth属性呢?
在Chrome、Safari和Firefox的一些版本中似乎都运行得很好，但在IE8甚至IE9中就完全不行。
另一个建议是使用imagesLoaded插件。
$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
您可以通过编程方式获取图像，并使用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';
