Le immagini, nella terminologia CSS, sono elementi rimpiazzati. L'elemento img
è solo un segnaposto il cui contenuto effettivo deve essere reperito dal browser seguendo l'URL dell'attributo src
. La natura peculiare di questi elementi rende difficile stabilirne con esattezza le dimensioni qualora manchino o delle regole CSS specifiche o gli attributi width
e height
. Tuttavia in jQuery esiste una soluzione specifica a questo problema.
Supponiamo di avere un'immagine priva di dimensioni specificate come la seguente:
<figure id="image-wrapper">
<img src="picture.jpg" alt="Immagine" />
</figure>
Potremmo cercare di ottenerne le dimensioni in questo modo:
$(document).ready(function() {
var img = $('img', '#image-wrapper');
console.log(img.width() + ' ' + img.height());
});
ma otterremo:
0 0
Anche utilizzando i metodi outerWidth()
ed outerHeight()
il risultato è il medesimo. Questo accade perché nel momento in cui l'immagine è stata completamente caricata le informazioni sulle dimensioni originarie dell'immagine non sono più disponibili dato che non è stata specificata alcuna dimensione.
Occorre dunque usare l'evento load
(deprecato ma in questo caso utile) per leggere le dimensioni originarie:
$(document).ready(function() {
var img = $('img', '#image-wrapper');
img.on('load', function() {
console.log(img.outerWidth() + ' ' + img.outerHeight());
});
});
e potremo ottenere ad esempio:
400 250