warunkowo wyświetl treść na podstawie zapytania o media

Question

Mam stronę internetową, w której w wersji na komputery wyświetla się pasek boczny zawierający od 10 do 20 małych zdjęć. Do tej pory na urządzeniach mobilnych ten pasek był po prostu ukryty za pomocą display: none, co jest najmniej wydajnym rozwiązaniem, ponieważ wszystkie obrazy i tak zostaną załadowane.

Zastanawiam się teraz, jaki jest najlepszy sposób na całkowite wyłączenie paska bocznego na urządzeniach mobilnych (bez użycia osobnego żądania AJAX).

Najlepszym rozwiązaniem mogłoby myślę jest następujące:

• Wpisz kod HTML na pasku bocznym w zmiennej JavaScript
• testu szerokość urządzenia poprzez sprawdzenie zapytania mediów z JavaScript (np używając Modernizr.mq lub więcej)
• Jeżeli ten test daje urządzenie nie komórkowej, zapis zawartości zmiennej w DOM, na przykład za pomocą innerHTML, jQuery.append, jQuery.prepend lub podobnego

Wiem, że wydajność RWD może czasami być bardzo skomplikowanym tematem i że najbardziej wydajne rozwiązanie często nie jest oczywiste. Czy ktoś może pomyśleć o lepszym rozwiązaniu niż przedstawione powyżej?

Answer 1

Jeśli nie chcesz, aby obrazy były ładowane na urządzenia mobilne, zamiast umieszczać obrazy jako znaczniki <img>, możesz ustawić elementy div na żądaną szerokość i wysokość, a obrazy ustawić jako obrazy tła. W twoim css domyślnie ukryj pasek boczny. Następnie, bez względu na szerokość, którą uznasz za niewyczerpaną, użyj zapytań o media, aby wyświetlić pasek boczny i wczytać obrazy tła w elementach 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"); 
    } 
    /* ... */ 
} 

Wadą jest to, że poprzez umieszczenie treści w arkusze stylów, jesteś handel wydajność semantyki.

Answer 2

właśnie robi rozeznanie, jak to zrobić, a ten wpadł przez grupę żarnika: https://github.com/filamentgroup/Ajax-Include-Pattern/

wydaje się łatwy do skonfigurowania. Działa to na podstawie tego, co wygląda jak zapytania o media ustawione w atrybutach danych.

Więc pasek boczny nie chcesz, aby pojawić się na komórkowego będzie wyglądać mniej więcej tak:

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

Więc sidebar przyjdzie tylko na ekranie, która była co najmniej 40ems szeroki (~ 640). Oczywiście potrzebujesz również pliku javascript i go zainicjować, ale te też wyglądają dość prosto.