我正在创建一个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。


当前回答

如果图像已经被使用,你应该:

设置图像尺寸为初始值 image.css(“宽度”,“初始”); image.css(“高度”,“初始”); 得到维度 var originalWidth = $(this).width(); var originalHeight = $(this).height();

其他回答

如果图像已经被使用,你应该:

设置图像尺寸为初始值 image.css(“宽度”,“初始”); image.css(“高度”,“初始”); 得到维度 var originalWidth = $(this).width(); var originalHeight = $(this).height();

这对缓存的和动态加载的图像都有效。

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/

这适用于我(safari 3.2),从窗口内发射。onload事件:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

函数getOriginalWidthOfImg(img_element) { var t = new Image(); T.src = (img_element。getAttribute吗?img_element.getAttribute("src"): false) || 返回t.width; }

您不需要从图像或图像维度属性中删除样式。只需用javascript创建一个元素,并获得创建的对象宽度。

那么形象呢?naturalHeight和image。naturalWidth属性呢?

在Chrome、Safari和Firefox的一些版本中似乎都运行得很好,但在IE8甚至IE9中就完全不行。