使用 JQuery 在图像上创建类答案

【问题标题】：Creating Class on Image with JQuery使用 JQuery 在图像上创建类
【发布时间】：2014-08-21 05:45:11
【问题描述】：

现在我正在尝试使用以下代码为图像添加一个类：

  $('.gallery img').each(function() {
    if ($(this).width() > $(this).height()) {
      $(this).addClass('landscape');        
    }
  });

代码有时可以工作，但有时没有添加类，因此我的样式没有应用。我尝试过使用和不使用 $(document).ready 函数，以及将其放在图像旁边而不是代码末尾，但没有什么能始终如一地将类添加到风景图像中。我不确定还能尝试什么。有什么建议吗？

【问题讨论】：

它只适用于宽度大于高度的图像。
运行时图像是否已经在 DOM 中？
@Dan，我很确定这就是“当他们是风景时”的意思
看来你应该在检查尺寸之前听load事件。
听起来高度和宽度不是你想象的那样。

标签： javascript jquery

【解决方案1】：

还要监听加载事件，因为某些图像可能未加载（因此具有未知的宽度/高度）：

// Put this in your $(document).ready
function handleImage($image) {
  if ($image.width() > $image.height()) {
    $image.addClass('landscape');        
  }
}
$('.gallery img').each(function() {
  handleImage($(this));
}).load(function() {
  handleImage($(this));
});

请注意，如果您事先知道尺寸，建议在图像标签上使用 width 和 height 属性。添加这些属性将不再需要 onload 处理程序。

【讨论】：