visualizza in modo condizionale il contenuto basato su Media Query

Question

Ho un sito Web in cui nella versione desktop viene visualizzata una barra laterale contenente da 10 a 20 immagini di piccole dimensioni. Fino ad ora, sui dispositivi mobili questa sidebar era semplicemente nascosta con un display: none, che è la soluzione meno performante dal momento che tutte le immagini verranno caricate comunque.

Ora mi chiedo quale sia il modo migliore per disattivare completamente la barra laterale sui dispositivi mobili (senza utilizzare una richiesta AJAX separata).

La soluzione migliore mi veniva in mente è la seguente:

• scrivere il codice HTML della barra laterale in un test JavaScript variabile
• la larghezza del dispositivo controllando una media query con JavaScript (ad esempio utilizzando Modernizr.mq o così)
• se questo test produce un dispositivo non mobile, scrivere il contenuto della variabile nel DOM, ad esempio utilizzando innerHTML, jQuery.append, jQuery.prepend o simile

So che le prestazioni RWD a volte possono essere un argomento molto complicato e che la soluzione più performante spesso non è ovvia. Quindi qualcuno può pensare ad una soluzione migliore rispetto a quella presentata sopra?

Answer 1

Se non si desidera caricare le immagini su dispositivi mobili, invece di posizionare le immagini come tag <img>, è possibile impostare le div alla larghezza e all'altezza desiderate e portare le immagini come immagini di sfondo. Nel tuo css, nascondi la barra laterale per impostazione predefinita. Quindi, a qualsiasi larghezza tu ritenga di essere al di là del cellulare, usa le query multimediali per visualizzare la barra laterale e caricare le immagini di sfondo nei div.

#sidebar { 
    display: none; 
} 
#sidebar div#sidebar-img-1 { 
    width: 100px; 
    height: 100px; 
} 
/* ... */ 

@media only screen and (min-width: 480px) { 
    /* display sidebar */ 
    #sidebar { 
     display: block; 
    } 
    /* set background image for sidebar items */ 
    #sidebar div#sidebar-img-1 { 
     background-image: url("sidebar1.jpg"); 
    } 
    /* ... */ 
} 

Lo svantaggio è che mettendo contenuti nei fogli di stile, stai negoziazione prestazioni per la semantica.

Answer 2

Stavo solo facendo qualche ricerca su come fare questo e corse in questo dal gruppo filamento: https://github.com/filamentgroup/Ajax-Include-Pattern/

sembra facile da configurare. Funziona su ciò che assomiglia alle query multimediali impostate negli attributi dei dati.

Quindi una barra laterale non si desidera visualizzare sul cellulare sarebbe simile a questa:

<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside> 

Così la vostra barra laterale sarebbe venuto solo in su uno schermo che è stato almeno 40ems (~ 640px) di larghezza. Naturalmente è necessario anche il file javascript e avviarlo, ma anche quelli sembrano abbastanza semplici.