在将其添加到 DOM 之前获取 IMG 的自动大小（使用 JQuery）

Question

我正在使用 JQuery 将 IMG 组件动态添加到我的 DOM，但根据它们的大小，我将以不同的方式添加它们。在我将 IMG 添加到 DOM 之前，任何人都有获得 IMG 自动调整尺寸的好主意吗？

注意：我在玩 DOM sn-p JQuery 操作，如 here 所述，但 img 尺寸 = 0。

Answer 1

DOM 元素只有在添加到父元素时才有尺寸，因为尺寸由渲染引擎决定。要解决此问题，请将<div> 容器绝对定位在屏幕外，首先将图像添加到其中，获取尺寸，然后将图像添加到其最终目的地。

类似：

var _offscreen = $('<div></div>')
    .css({position:'absolute',left:'-999999px',width:'400px',height:'600px'})
    .appendTo($('body'));

var img = $('<img>/img>')
    .attr('src',"http://l1.yimg.com/a/i/ww/news/2011/03/25/zo.jpg")
    .load(function() {

      var $this = $(this);
      $this.appendTo(_offscreen);

      setTimeout(function() {
         var width = $this.width();
         var height = $this.height();

         alert($this.attr('src') + ' = ' + width + "x" + height);      
      }, 0);
});

** 编辑 **

我刚刚更新了上面的代码。事实证明，您需要让渲染引擎绘制图像（当然！）然后然后获取尺寸。这样编辑就可以了。

这可以放在一个方便的函数中，比如：

$('imageElement').loadImage("path/to/image", function() {
   alert("Image " + $(this).attr('src') + " loaded: " + $(this).width() + "x" + $(this).height());
});

** 更新 **

我想您可能希望看到将上面的代码放入 JQuery plugin... 只是为了好玩 :) 它只是工作，没有完成验证（即它不会检查您是否传递了除 @ 之外的其他元素987654325@)，如果选择器返回多个元素，插件会将相同的图像加载到每个选定的元素中。实际上，您可以将插件参数 url 设为一个数组（可选）并在每个选定元素中加载数组的每个图像，等等。只是一个想法。

Answer 2

您应该能够在不将图像附加到 DOM 的情况下执行此操作。 Kristoffer（嘿，这也是我的名字！）在正确的轨道上，但需要先加载图像，然后才能尝试读取宽度/高度。

var getImageSize = function(src) {
    var img = new Image();
    $(img).bind('load', function(e) {
        var height = img.height;
        var width = img.width;
        document.write('width:' + width + ', height: ' + height);
    });
    img.src = src;
};

getImageSize('http://farm4.static.flickr.com/3261/5791911248_b777cb1dde_b.jpg');

在这里演示：http://jsfiddle.net/H3p97/