jQuery: leggere le dimensioni originarie delle immagini prive di dimensioni specificate

jQuery: leggere le dimensioni originarie delle immagini prive di dimensioni specificate

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

Torna su