jquery - 在将 IMG 添加到 DOM 之前获取 IMG 的自动大小(使用 JQuery)

Question

我正在使用 JQuery 将 IMG 组件动态添加到我的 DOM，但根据它们的大小，我将以不同的方式添加它们。在将 IMG 添加到 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是一个数组(可选)并在每个选定元素中加载数组的每个图像，等等。只是一个想法。