Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Immagine responsive: ipotesi di implementazione lato server

Immagine responsive: ipotesi di implementazione lato server


Passiamo al codice.

In testa alla pagina (subito dopo il tag <html>) inseriamo il richiamo al file “responsive.js”:

<script type="text/javascript" src="responsive.js"></script>

La posizione di inserimento non è scelta a caso. Per evitare possibili rallentamenti è necessario che il codice sia eseguito il prima possibile. Se così non fosse, nei casi peggiori, al primo caricamento della pagina verrebbero restituite le immagini di dimensioni maggiori anche nei casi di dispositivi mobili.

Il file contiene un array da personalizzare. Sono i breakpoints, ovvero le risoluzioni da gestire. Il primo valore copre tutti i dispositivi larghi fino a 480 pixel (sostanzialmente gli smartphone nei due orientamenti). “small” è il valore che verrà scritto nel cookie. Il secondo valore copre tutti gli schermi fino a 1280 (anche desktop). “medium” è il valore che verrà scritto nel cookie. Potete aggiungere quante coppie chiave/valore volete.

Ho volutamente inserito dei messaggi “console.log” a scopo informativo. Vanno eliminati per gli ambienti di produzione.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var breakpoints = [["480", "small"], ["1280", "medium"]];
var u_res = window.screen.availWidth;
 
function readCookie(name) {
	var n_cookie = document.cookie.split("; "),
	count = n_cookie.length, single_cookie;
	while (count--) {
		single_cookie = n_cookie[count].split("=");
		if (single_cookie[0] === name)
		return single_cookie[1];
	}
	return false;
}
 
// cancello cookie on resize finestra
window.onresize = function(event) {
	document.cookie = "s_responsive=; path=/;expires=Sun, 15 Aug 1976 00:00:01 GMT;";
}
 
// se la max risoluzione utente supera l'ultimo breakpoint non entro in loop e cancello eventuale cookie
if (u_res > breakpoints[breakpoints.length-1][0]) {
 
	if (window.console) console.log('la risoluzione supera l\'ultimo breakpoint. quindi viene fornita immagine default');
 
	if (readCookie('s_responsive') != '') {
 
		document.cookie = "s_responsive=; path=/;expires=Sun, 15 Aug 1976 00:00:01 GMT;";
		if (window.console) console.log('cookie responsive presente e cancellato');
	}
 
} else {
 
	for(var i = 0; i < breakpoints.length; i++) {
 
		if (window.console) console.log('inizio loop ' +i);
 
		if (u_res <= breakpoints[i][0]) {
 
			if (readCookie('s_responsive') != breakpoints[i][1]) {
 
				document.cookie = "s_responsive=" + breakpoints[i][1] + "; path=/;";
				if (window.console) console.log('cookie settato a: ' +breakpoints[i][1]);
			}
 
			if (window.console) console.log('max risoluzione è: ' +breakpoints[i][0]);
			if (window.console) console.log('fine loop ' +i);
			break;
		}
 
		if (window.console) console.log('fine loop ' +i);
	}
}

A questo punto creiamo un htaccess con queste regole:

1
2
3
4
5
6
7
8
9
RewriteEngine On
 
RewriteCond %{HTTP_COOKIE} s_responsive=medium [NC]
RewriteCond %{QUERY_STRING} ^m=(.*)&s=(.*)$
RewriteRule ^(.*)/(.*)\.(jpe?g|png|gif)$ $1/%1 [NC,L]
 
RewriteCond %{HTTP_COOKIE} s_responsive=small [NC]
RewriteCond %{QUERY_STRING} ^m=(.*)&s=(.*)$
RewriteRule ^(.*)/(.*)\.(jpe?g|png|gif)$ $1/%2 [NC,L]

Il numero delle regole e il valore del cookie dovrebbe rispecchiare quanto scritto nel javascript.

Infine le immagini saranno così richiamate:

1
<img src="img/test.normal.png?m=test.medium.png&s=test.small.png" alt="" />

Se aggiungete nuovi tagli e parametri in GET ricordatevi di aggiornare il file htaccess ovviamente.

Pagina: 1 [2] 3

link sponsorizzati

Consiglialo su Facebook

Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,394 secondi dopo aver eseguito ben 63 query. Wordpress... prestazioni da urlo!