在添加到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

您將需要特殊的圖像加載事件插件 。 否則，如果圖像已經在瀏覽器的緩存中，則不會觸發事件。 然后你可以這樣做：

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