reagujących obrazy nie srcset pracy

Próbowałem do wdrożenia nowego podejścia srcset do reagujących obrazów, stosując następujący kod HTMLreagujących obrazy nie srcset pracy

 <img class="swapImages" 
     srcset="assets/images/content/large.jpg 1200w, 
       assets/images/content/medium.jpg 800w, 
       assets/images/content/small.jpg 400w" 
     sizes="100vw" 
     src="assets/images/content/small.jpg" 
     alt="responsive image">

im przy chrom 40 i wszystko mam to największy obrazu, zmiana rozmiaru przeglądarkę , czyszczenie pamięci podręcznej nic nie robi.

Czytałem gdzieś musiałem polyfillować, więc użyłem wtyczki obrazka, chociaż chrom powinien ją wspierać ..... nadal nie działa.

Stworzyłam stronę demonstracyjną dla niego: http://www.darrencousins.com/lab/resp-img-srcset/

Co robię źle/nie dostanę?

Każda pomoc jest bardzo ceniona.

Źródło

2015-02-21 sygad1

http://stackoverflow.com/questions/28365079/do-latest-chrome-opera-get -srcset-wrong –

Masz to poprawnie.

Chodzi o to, że gdy Twoja przeglądarka ma obraz o wyższej rozdzielczości (załadowany, w pamięci podręcznej), nie ma sensu, aby pobrać go o niższej jakości, nawet jeśli zmniejszysz okno (chodzi o to, aby oszczędzać ruch).

Więc jeśli chcesz przetestować to, po prostu zmniejsz okno, a następnie wczytaj stronę (po wyczyszczeniu pamięci podręcznej/lub skorzystaniu z trybu incognito). Otrzymasz wersję mobilną lub tablet. Następnie zwiększając okno, zobaczysz, że przeglądarka przełącza się na obraz o wyższej rozdzielczości.

Źródło

2015-05-06 21:11:17 TondaCZE

To nie działa dla mnie, mimo że czyszczę pamięć podręczną! :/ – Ciwan

Wypróbuj tryb incognito w Chrome, aby się upewnić (jeśli już testowałeś go, zamknij wszystkie okna/karty i zacznij od nowa). Najpierw zmniejsz rozmiar okna, NASTĘPNIE załaduj stronę, kolejność jest niezbędna. To powinno działać, może spróbuj podać informacje o twojej przeglądarce. – TondaCZE

Buforowanie może być czymś, na co warto zwracać uwagę, ale z pewnością nie jest to kwestia pod ręką. Kod OP wciąż ładuje obraz 800w na przeglądarkach mobilnych <800px i ekrany incognito na 320px – BenRacicot

W przypadku użycia w znaczniku img atrybut srcset pozostawia decyzje do przeglądarki pod kątem tego, który obraz załadować, jak wspomniano przez TondaCZE. Jeśli chcesz zmusić przeglądarki do ładowania obrazów w określonych rzutniach, chcesz użyć elementu graficznego.

<picture> 
    <source srcset="large.jpg" media="(min-width: 1200px)" /> 
    <source srcset="medium.jpg" media="(min-width: 800px)" /> 
    <img src="small.jpg" /> 
</picture>

Źródło

2015-11-04 15:39:26

Masz rację. Tylko poprawka to domyślny tag obrazu powinien mieć '' zamiast ''. – WayBehind

Właśnie zauważyłem, że strona demo (http://www.darrencousins.com/lab/resp-img-srcset/) nigdy nie wyświetlając wersję mobilną (nawet podczas zmiany rozmiaru przeglądarki lub za pomocą DevTools - tryb Device) w Google Chrome (wersja 48).

Zmiana stosunku pikseli urządzenia do wartości 1 wydaje się prawidłowy.

Nie wiem dlaczego, zastanawiam się, czy przyjąć deskryptory W stosunku urządzenia pikseli pod uwagę

Źródło

2015-12-11 11:17:49 MeV

Podczas testów pamiętaj o punktach wymienionych w tym artykule: http://nilesh2git.com/Blog/2017/06/10/responsive-image-lessons/#comments –

Chyba testują na przeglądarce Chrome, a Jedynym powodem, dla którego nie działa, jest jego funkcja chromowania. Zobacz poniżej przepełnienie stosu wątku (posiada ona dobra dla najnowszej wersji Chrome V54 również):

Google Chrome version 40 srcset attribute problems

sprawdzone swoją stronę w IE8 i Firefoxv49 i wszystko działa jak czar!

Inną rzeczą, którą zaobserwowałem, jest to, że choć chrome nie pobiera innych obrazów, zmienia rozmiar bardzo dobrze pobranego.Tak więc, w pewnym sensie nadal jesteśmy w znacznie lepszej kondycji nie tylko to było to na stronie:

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

Źródło

2016-10-18 16:15:47 Kaashan

reagujących obrazy nie srcset pracy

Odpowiedz

Powiązane problemy