jquery événement feu lorsque l'élément est montré

Question

je dois tirer un événement sur les conditions suivantes pour une image:

1) L'image a été chargée (la fonction suivante prend en charge que) 2) L'image est montré. (si l'image n'a pas encore été affichée, height() et width() retournent zéro, ce qui signifie que je ne peux pas redimensionner l'image

Le problème principal ici est que mon image a été chargée dans l'enfant d'un div caché. Comme il est un enfant du div caché, le changement() ne fonctionnera pas

est la fonction ici, je suis actuellement en utilisant:.

//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> éléments ont hauteur et largeur des propriétés qui sont automatiquement peuplé par le navigateur wh En détermine les dimensions d'une image. .height() et .width() carte au plus générique offsetHeight et offsetWidth propriétés qui renvoient 0 lorsqu'un élément est masqué. Accès aux hauteur et largeur propriétés devraient permettre directement votre code fonctionne correctement:

//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); 
     }); 
    }); 
};