添加到 DOM 后不久在 Jquery 中调整图像大小？

Question

我正在做这样的事情：

maxDim = 100;
$('div.images').html('<img class="pull" src="'+imgs[img_i]+'" />');
$('img.pull').each(function(i){
  if( $(this).height() > $(this).width() ){
    var h = maxDim;
    var w = Math.ceil( $(this).width() / $(this).height() * maxDim);
  }
  else{
    var w = maxDim;
    var h = Math.ceil( $(this).height() / $(this).width() * maxDim);
  }
  $(this).css({height:h, width:w});
});

现在我很确定图像大小调整部分很好......尤其是因为它与这个答案匹配 http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

有时有效，有时无效的问题。 （它有时仍会显示原始分辨率并在其他分辨率上调整大小）似乎时间是这里真正的问题。也许在图像实际上在 DOM 中之前调用调整大小以在之后再次选择它？你们的任何建议将不胜感激。

Answer 1

我猜有时图像还没有加载。在这种情况下，原始大小仍然未知 (0)，并且由于除以零，计算会导致 NaN 值。

当图像的加载事件触发时调整大小应该是一个选项。

Answer 2

您将需要special image load event plug-in。否则，如果图像已经在浏览器的缓存中，则不会触发该事件。然后你可以这样做：

$('img.pull').load(function(i){
    // ...
});