Jak zrobić leniwy obraz ładujący z srcset?

Question

Używam slick.js do budowy karuzeli. Jednak pomimo zmiany atrybutu z src na data-lazy obrazy nadal są ładowane przed przewinięciem do tego obrazu. Podejrzewam, że to dlatego, że mam na moim obrazku tag srcset. Moje pytanie brzmi: jak zapobiec załadowaniu przez przeglądarkę obrazu responsywnego lub leniwemu ładowaniu poprawnych obrazów.

Jest to próbka mojego img tag

<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px"> 

Answer 1

lazySizes właśnie działa poprawnie. Musisz jednak zmienić swój znacznik w coś takiego.

<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" /> 

Uwaga srcset zmienia się na data-srcset i data-lazy zmienia się na data-src. Dodatkowo musisz dodać klasę lazyload.

Twój atrybut sizes nie miał zbytniego sensu. Może chcesz zamiast tego używać deskryptorów x? Lub po prostu użyć sizes="200px"? Nie wiem Po prostu zamieniłem go na data-sizes="auto", więc zostanie on automatycznie obliczony dla ciebie. (Ale w takim przypadku wymiar obrazu musi zostać obliczony przed załadowaniem obrazu.)

Funkcja lazySizes rzeczywiście ładuje obrazy przed wyświetleniem. Jest to duża poprawa dla wygody użytkownika. Użytkownik, który przewija coś do widoku, nie chce wtedy czekać. Lazyloader, który rozpoczyna pobieranie obrazu po jego wyświetleniu, zakłóca działanie użytkownika.

Jedną z zalet leniwizbiorów jest to, że ten leniwy moduł ładujący sprawdza, czy przeglądarka jest obecnie intensywnie pobierana, i decyduje o tym fakcie, niezależnie od tego, czy pobiera tylko obrazy w widoku, czy też ładuje obrazy w pobliżu.

Ale jeśli nie chcesz tego, możesz to kontrolować, ustawiając opcje lazySizes "expand i expFactor.

Answer 2

Polecam responsivelyLazy. Wdrożenie jest przyjazne SEO i nie psuje twojego kodu HTML. Oto fragment:

<div class="responsively-lazy" style="padding-bottom:68.44%;"> 
<img 
    alt="" 
    src="images/2500.jpg" 
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
    data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w" 
/> 

Jak widać wartość w atrybucie src nie jest modyfikowany.

Czytaj więcej na http://ivopetkov.com/b/lazy-load-responsive-images/