我正在创建一个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。
当前回答
在github检查这个存储库!
使用Javascript检查宽度和高度的好例子
https://github.com/AzizAK/ImageRealSize
-编辑的要求从一些评论。
Javascript代码:
function CheckImageSize(){
var image = document.getElementById("Image").files[0];
createReader(image, function (w, h) {
alert("Width is: " + w + " And Height is: "+h);
});
}
function createReader(file, whenReady) {
var reader = new FileReader;
reader.onload = function (evt) {
var image = new Image();
image.onload = function (evt) {
var width = this.width;
var height = this.height;
if (whenReady) whenReady(width, height);
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
和HTML代码:
<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>
其他回答
现在有一个jQuery插件，event.special。Load，用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
这适用于我(safari 3.2)，从窗口内发射。onload事件:
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.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';
正如Luke Smith所说，图像加载是一团糟。它在所有浏览器上都不可靠。这个事实给了我极大的痛苦。缓存的图像在某些浏览器中根本不会触发事件，所以那些说“图像加载比setTimeout更好”的人是错误的。
卢克·史密斯的解决方案在这里。
关于如何在jQuery 1.4中处理这些混乱的问题，有一个有趣的讨论。
我发现这是相当可靠的设置宽度为0，然后等待“完成”属性为真，宽度属性来大于零。您还应该注意错误。
为了补充Xavi的答案，Paul Irish的github David Desandro的gitgub提供了一个名为imagesLoaded()的函数，它的工作原理相同，并解决了一些浏览器的缓存图像不触发.load()事件的问题(使用聪明的original_src -> data_uri -> original_src切换)。
它被广泛使用并定期更新，这有助于它成为解决问题的最健壮的解决方案。
