Jquery-在 .each 循环中获取图像尺寸？答案

【问题标题】：Jquery- getting image dimensions in a .each loop?Jquery-在 .each 循环中获取图像尺寸？
【发布时间】：2011-02-21 15:01:57
【问题描述】：

我正在尝试编写一些代码来打印 div 中包含的所有图像的尺寸，虽然看起来很简单，但我似乎无法让它工作。谁能指出这里的错误？谢谢！

$(document).ready(function() {

  var width = 0;
  var height = 0;
  var hello = "hello";

  $('#imagebox img').each(function(){

    width = $(this).width;
    height = $(this).height;
    $('#main').append(hello);
    $('#main').append(width);
    $('#main').append(height);    
  });

});

JSBin Example Here

【问题讨论】：

标签： jquery image dimensions each

【解决方案1】：

宽度和高度是函数。试试：

width = $(this).width();
height = $(this).height();

【讨论】：

+1 或者更好的是var $this = $(this); width = $this.width(); height = $this.height();（因为每次调用$() 时，jQuery 都必须进行多次函数调用和内存分配）。
什么菜鸟错误呵呵。感谢您的帮助（和优化提示 TJ）:)

【解决方案2】：

没有属性widht 和height。你能做的是

width = $(this).css('width');

或

width = $(this).width();

高度也是如此。

【讨论】：

【解决方案3】：

您应该在图像完全加载后执行此操作。

为此，可以将代码放在.load() 处理程序中。

var main = $('#main');

$('#imagebox img').load(function(){
  var $th = $(this);
  width = $th.width();
  height = $th.height();
  main.append((hello + width) + height);   
});

或者如果您想确保以正确的顺序附加图像尺寸，请在window load 上执行。

$(window).load(function() {
    var main = $('#main');

    var vals = $('#imagebox img').map(function(){
      var $th = $(this);
      width = $th.width();
      height = $th.height();
      return (hello + width) + height;   
    }).get();

    main.append( vals.join('') );
});

【讨论】：

附带说明，这种技术不一定会按照图像在页面上的位置顺序输出宽度和高度，只是按照首先加载的顺序。可能对原始海报有用。

【解决方案4】：

我已将您的版本修改为

使用正确的高度和方法宽度
停止重新查询 DOM 元素一遍又一遍
停止重复调用 append

见http://jsbin.com/ikoge5/15/edit

【讨论】：

更简洁的优化，太棒了，感恩！