Question

我正在使用JQuery动态地将IMG组件添加到我的DOM中，但是根据它们的大小，我将以不同的方式添加它们。在我将它添加到DOM之前，任何人都有一个很好的想法来获取IMG的自动大小尺寸？

注意：我正在使用DOM片段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 ...只是为了好玩:)它只是有效，没有完成验证（即它不会检查您是否通过其他元素比<img>），如果选择器返回多个元素，插件会将相同的图像加载到每个选定的元素中。你实际上可以让插件参数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/

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

2 个答案: