jQuery obtient la hauteur d’une image sensible

J’ai un ensemble d’images qui réagissent à la page (c’est-à-dire que la largeur maximale est définie sur 100%).

avec

 .exh img { max-width:100%; }

Comment puis-je récupérer la hauteur de l’image une fois la fenêtre redimensionnée et chaque fois que la page est chargée? Lorsque j’utilise ce qui suit, j’obtiens une hauteur de 0.

 $(".exh img").each(function() { var $this = $(this); console.log( $this.height() ); });

Par cette réponse, j’ai donné à une question similaire:

Pourquoi jQuery.css (‘width’) renvoie-t-il différentes valeurs dans différents navigateurs?

.width() ou height() est la taille “rendue dans le DOM” de l’élément – et pour qu’il renvoie une valeur supérieure à 0, l’élément doit être entièrement disponible pour le DOM (autrement dit, l’image doit être entièrement chargé)

Ce que tu veux c’est:

 var myImage= new Image(); myImage.onload=function() { alert(this.height);} myImage.src= "your/image/url";

En bref – vous devez vous assurer que l’image a été chargée avant d’appeler height()

Si vous devez le faire à chaque fois que la page est chargée et lorsque la page est redimensionnée, procédez comme suit:

 $(document).ready( function() { //Fires when DOM is loaded getImageSizes(); $(window).resize(function() { //Fires when window is resized getImageSizes(); }); }); function getImageSizes() { $(".exh img").each(function() { var $this = $(this); console.log( $this.height() ); }); }

Plus d’informations sur .resize (): http://api.jquery.com/resize/

Plus d’informations sur .ready (): http://api.jquery.com/ready/