Elucubrato da saibal
Addì 29 Luglio 2013
Immagine responsive: ipotesi di implementazione lato server
Link utili:
link interno
link esterno
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.
- 665 visite
Vota: %SAIBAL_PERCENTAGE%%
Loading...
Lascia un Commento