我正在创建一个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。
当前回答
那么形象呢?naturalHeight和image。naturalWidth属性呢?
在Chrome、Safari和Firefox的一些版本中似乎都运行得很好，但在IE8甚至IE9中就完全不行。
其他回答
下面是一个跨浏览器的解决方案，当您所选择的图像加载时触发一个事件:http://desandro.github.io/imagesloaded/您可以在imagesLoaded()函数中查找高度和宽度。
Webkit浏览器在图像加载后设置高度和宽度属性。我建议使用图像的onload事件，而不是使用超时。这里有一个简单的例子:
var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
为了避免CSS对图像尺寸的影响，上面的代码在内存中复制了图像。这是FDisk提出的一个非常聪明的解决方案。
你也可以使用naturalHeight和naturalWidth HTML5属性。
函数getOriginalWidthOfImg(img_element) { var t = new Image(); T.src = (img_element。getAttribute吗?img_element.getAttribute("src"): false) || 返回t.width; ｝
您不需要从图像或图像维度属性中删除样式。只需用javascript创建一个元素，并获得创建的对象宽度。
这对缓存的和动态加载的图像都有效。
function LoadImage(imgSrc, callback){
var image = new Image();
image.src = imgSrc;
if (image.complete) {
callback(image);
image.onload=function(){};
} else {
image.onload = function() {
callback(image);
// clear onLoad, IE behaves erratically with animated gifs otherwise
image.onload=function(){};
}
image.onerror = function() {
alert("Could not load image.");
}
}
}
使用此脚本:
function AlertImageSize(image) {
alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);
演示:http://jsfiddle.net/9543z/2/
我已经做了一些变通的实用函数，使用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)
