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


当前回答

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

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

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

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

其他回答

正如Luke Smith所说,图像加载是一团糟。它在所有浏览器上都不可靠。这个事实给了我极大的痛苦。缓存的图像在某些浏览器中根本不会触发事件,所以那些说“图像加载比setTimeout更好”的人是错误的。

卢克·史密斯的解决方案在这里。

关于如何在jQuery 1.4中处理这些混乱的问题,有一个有趣的讨论。

我发现这是相当可靠的设置宽度为0,然后等待“完成”属性为真,宽度属性来大于零。您还应该注意错误。

现在有一个jQuery插件,event.special。Load,用于处理缓存映像上的Load事件未触发的情况:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

我已经做了一些变通的实用函数,使用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)

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

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

使用HTML5中的naturalHeight和naturalWidth属性。

例如:

var h = document.querySelector('img').naturalHeight;

工作在IE9+, Chrome, Firefox, Safari和Opera(统计)。