Seguendo il trend delle ultime settimane, così come ha fatto Adobe nel nuovo Dreamweaver CS6 con il Responsive Design e le sue griglie fluide ( la cui traduzione in italiano suona, a mio avviso, veramente male ), mi sono immerso una mezz’ora in jQuery per risolvere un problema con un sito di un cliente.

La necessità parte dal fatto che l’immagine di sfondo, con proprietà width=100%, non può essere proposta sia sul mobile che su tablet e desktop alla stessa maniera, della stessa qualità. Bisogna essere cortesi nei confronti degli user su mobile, giusto?

Partendo da una immagine, ne realizzo una versione MidRes e una LowRes, e mi accingo a scrivere lo script che mi scali l’immagine in maniera dinamica.

L’immagine di partenza è la seguente:

Prima di tutto, inserisco qualche linea di CSS per eliminare i margini di default del BODY e per mostrare al 100% l’immagine presente in pagina:

Codice CSS:

body{
	padding:0px;
	margin:0px;
}
img{
	width:100%;
	height:auto;
}

Codice HTML:

</pre>
<img id="thisimg" alt="" data-lowres="image_lowres.jpg" data-midres="image_midres.jpg" data-hd="image_hd.jpg" />
<pre>

Come noterete, ho usato alcuni tag custom, dove ho indicato le tre versioni diverse della medesima immagine. Come noterete, inoltre, non ho inserito alcuna immagine in SRC. Noteremo più avanti questa anomalia.

Ora, prima di tutto, scrivo in console un messaggio ogni qual volta viene ridimensionata la finestra:

$(window).resize(function(){
	var altezza = $(window).height();
	var larghezza = $(window).width();
	console.log('it\'s resizing, now it\'s ' + larghezza +'x'+ altezza);
});

Ora, se tutto funziona a dovere, dovreste notare in Console la dimensione della finestra ogni qual volta ridimensionerete il tutto. Non funziona? Controllate di avere inserito il riferimento alla libreria jQuery.

Ora creiamo la funzione che controlla la dimensione e, eventualmente, cambiamo l’SRC dell’immagine.

function CheckRes(object){
	// misuro la dimensione della finestra
	var window_width = $(window).width();

	// controllo l'attuale SRC
	var original_src = $(object).attr('src');

	var img_low = $(object).attr('data-lowres');
	var img_mid = $(object).attr('data-midres');
	var img_hd = $(object).attr('data-hd');

	if(window_width		var new_src = img_low;		// smartphone
	}else{
		if(window_width			var new_src = img_mid;	// iPad
		}else{
			var new_src = img_hd;		// desktop
		}
	}
	if(original_src!=new_src){
		$(object).attr('src',new_src);
	}

}

Cosa fa il codice?
Carica la larghezza della finestra nella variabile original_src, successivamente identifica le 3 versioni differenti dell’immagine e, a seconda della risoluzione, se l’SRC è differente dal nuovo, ne modifica il puntamento. Tutto molto semplice.

Aggiungiamo quindi, in fase di resizing, la funzione creata.

$(window).resize(function(){
	var altezza = $(window).height();
	var larghezza = $(window).width();
	//console.log('it\'s resizing, now it\'s ' + larghezza +'x'+ altezza);
	CheckRes('#thisimg');   // Nota che CheckRes deve ricevere il selettore corretto, #thisimg
});

Ora, al momento del caricamento, la pagina rimarrà vuota e l’immagine verrà caricata correttamente solo dopo un window resizing.
Non ci resta che aggiungere l’ultima riga di codice:

$(document).ready(function(e) {
    CheckRes('#thisimg');
});

Il gioco è fatto.
Fate le varie prove, noterete che ogni volta verrà caricata l’immagine corretta a seconda della dimensione della finestra. Buon responsive design!

Se volete vedere l’esempio in pratica, cliccate qui.