Изменение размера изображений в Jquery вскоре после добавления в DOM?

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

Вам понадобится специальный плагин события загрузки изображения . В противном случае событие не будет запущено, если изображение уже находится в кэше браузера. Тогда вы можете сделать это:

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

Answer 2

Я думаю, изображения иногда не загружаются. В этом случае исходный размер все еще неизвестен (0), и вычисление приводит к значениям NaN из-за деления на ноль.

Изменение размера, когда событие загрузки изображений должно быть опцией.