Używanie zapytań o media do kontrolowania pobierania obrazów

Question

Jeśli utworzę kontener i chcę ustawić obraz tła w oparciu o zapytania o media, dlaczego przeglądarka (Firefox, Chrome) pobiera obraz o średniej wielkości, jeśli duży został już pobrany ? To wydaje się całkowicie sprzeczne z punktem (np. Oszczędzanie przepustowości).

HTML

<div id="background"></div> 

CSS

#background { 
    width: 100%; 
    height: 400px; 
    background-image: url(/content/images/2016/04/airport-small.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

@media (min-width: 500px) { 
    #background { 
    background: url(/content/images/2016/04/airport-medium.jpg); 
    } 
} 
@media (min-width: 800px) { 
    #background { 
    background: url(/content/images/2016/04/airport-large.jpg); 
    } 
} 

Gdybym załadowania strony przeglądarka pobiera -large.jpg, w tej konfiguracji. Jeśli zmieniam rozmiar ekranu (poniżej 800 pikseli), przeglądarka pobierze i wyświetli kod -medium.jpg i tak dalej.

Jak mogę temu zapobiec?

Answer 1

Myślę, że głównym powodem konfliktu tutaj jest założenie, że zapytań o media zostały wdrożone, aby zaoszczędzić przepustowość. Zostały zaimplementowane do wyświetlania różnych rzeczy w różnych rozmiarach, to wszystko. To, że zdecydowałeś się wyświetlać ten sam obraz w innym rozmiarze, było po prostu sposobem, w jaki zdecydowałeś się je wykorzystać, a zapytania o media wiernie robią to, co obiecywały zrobić przez cały czas: Pokaż użytkownikowi, co powiedziałeś, aby pokazać użytkownikowi .

Polecam ocenić, czy jest to naprawdę warta inwestycja w czas i kod (pamiętając, że większość użytkowników nie zmieni rozmiaru okna ani nie obróci urządzenia mobilnego, a ci, którzy prawdopodobnie nie będą zniechęceni przez flash-and-reload). Jeśli zdecydujesz się to zrobić, to nie tylko przez CSS. Najlepiej będzie przetestować metody JavaScript, aby to zrobić, na przykład dodać klasę loaded-large do znacznika body onload, a następnie zapisać regułę CSS dla mniejszych obrazów, aby załadować tylko wtedy, gdy znacznik body nie ma class='loaded-large'.

Mam nadzieję, że to pomoże.

Answer 2

Zmieniasz rozmiar okna, co powoduje wykonywanie wielu zapytań o media, co powoduje pobranie wielu obrazów.

Ale jesteś programistą zajmującym się przeglądaniem stron internetowych w celu testowania przeglądarki. Rzeczywisty użytkownik zwykle tego nie robi. Użytkownik po prostu ląduje na Twojej stronie, aby wykonać swoją działalność na jednym ekranie o rozmiarze.

W twoim przypadku, jeśli ten użytkownik jest na urządzeniu o szerokości przeglądarki 500px - 799px, otrzyma średnie jpg i/lub małe jpg, w zależności od przeglądarki (patrz poniżej).

Należy pamiętać, że użytkownik o szerokości ekranu większej niż 800 pikseli może otrzymać wszystkie trzy obrazy. (Okno pasujący min-width: 800px pasuje również min-width: 500px.)

Na podstawie przeglądu Media Query & Asset Downloading Results zachowanie przeglądarka różni pod względem obrazu pobrania. W szczególności zobacz test nr 4.

---

także rozważyć element picture, który informuje przeglądarkę, której obraz jest najbardziej odpowiednia dla danego rozmiaru ekranu.

4.8.2 The picture element

Element picture jest kontenerem, który zapewnia wiele źródeł swojemu zawartych img elementu, aby umożliwić autorom deklaratywnie kontrola lub dać wskazówki do agenta użytkownika, o którym obraz zasobem użytku, w oparciu na ekranie gęstość pikseli, rozmiar widocznego obszaru, format obrazu, i inne czynniki.

<picture> 
    <source srcset="airport-small.jpg" media="(max-width: 499px)"> 
    <source srcset="airport-medium.jpg" media="(min-width: 500px) and (max-width: 799px)"> 
    <source srcset="airport-large.jpg" media="(min-width: 800px)"> 
    <img src="airport-small.jpg" alt=""> 
</picture> 

Jeśli wszystkie elementy source oceniać na false, jest stosowany element img. Jest to przydatny sposób zastępowania, ponieważ nie jest obsługiwany przez Internet Explorer.

---

Referencje:

• Media Queries Specification ~ W3C
• Media Query & Asset Downloading Results ~ Tim Kadlec
• 4.8.2 The picture element ~ W3C
• picture definition ~ MDN
• picture browser support ~ caniuse.com
• Polyfill for the picture element ~ Picturefill