JQuery огонь событие, когда элемент показан

Question

мне нужно стрелять событие на следующих условиях для изображения:

1) Изображение было нагруженного (следующая функция заботится о том, что) 2) Изображение показано на рисунке. (если изображение еще не показано, height() и width() возвращают ноль, то есть я не могу изменить размер изображения.

Основная проблема заключается в том, что мое изображение загружено в дочерний элемент скрытого div. Так как ребенок скрытый DIV, изменение() не будет работать

Вот функция настоящее время я использую:.

//Takes the number of pixesl to resize the x-axis of the image to 
$.fn.resizeImage = function(newX) { 
    return this.each(function() { 
     $this = $(this); 
     //The load event is defined via plugin and takes care of the problem of the load event 
     //not firing for elements that have been cached by the browser. 
     $this.bind('load', function(){ 
      var y = $this.height(); 
      var x = $this.width(); 

      //return if image does not for some reason 
      if(x == 0 || y == 0){return;} 

      //alert('y: ' + y + ' x: ' + x); 
      var ratio = y/x; 
      var newY = Math.floor(newX * ratio); 
      $this.height(newY); 
      $this.width(newX); 
     }); 
    }); 
}; 

Answer 1

<img> элементы имеют высоты и ширина свойства, автоматически заполняется браузером wh en определяет размеры изображения. .height() и .width() map to the generic offsetHeight и offsetWidth свойства, которые возвращают 0, когда элемент скрыт. Доступ в высота и ширина свойства непосредственно должны позволять ваш код работать правильно:

//Takes the number of pixesl to resize the x-axis of the image to 
$.fn.resizeImage = function(newX) { 
    return this.each(function() { 
     var $this = $(this); 
     //The load event is defined via plugin and takes care of the problem of the load event 
     //not firing for elements that have been cached by the browser. 
     $this.bind('load', function() { 
      var y = this.height; 
      var x = this.width; 

      //return if image does not for some reason 
      if (x == 0 || y == 0) { 
       return; 
      } 

      //alert('y: ' + y + ' x: ' + x); 
      var ratio = y/x; 
      var newY = Math.floor(newX * ratio); 
      $this.height(newY); 
      $this.width(newX); 
     }); 
    }); 
};