15 Maj 2019

IntersectionObserver czyli lazy loading

IntersectionObserver – w prosty sposób można opisać że jest to API za pomocą którego można wywołać zdarzenie, gdy element zniknie lub pojawi się w obrębie naszego ekranu, a jeszcze prościej na przykładzie np. galerii zdjęć. Wczytać tylko tyle zdjęcia które pojawią się w polu widzenia naszego okna.

Czyli nie ładujemy powiedzmy 100 zdjęć tylko doczytujemy pojedyncze zdjęcia przy skrolowaniu. Do tej pory wykorzystywaliśmy pluginy które nam to ułatwiały.

IntersectionObserver można wykorzystać nie tylko do wczytywania zdjęć, ale np. filmów, treści wszystko to dzieje się asynchronicznie.

Np. film włączony na stronie jeżeli zaczniemy przewijać i zniknie nam z „widoku” zostanie zastopowane odtwarzanie. Jeżeli ponownie się pojawi zostaje wznowione jego odtwarzanie.

Niestety jest jeden problem, w związku z tym że jest to nowa technologia nie jest obsługiwana przez starsze przeglądarki. Zerknijcie na [ Caniuse ] Sami sprawdźcie.

Żyjemy w czasach polyfill i na to również jest, działa nawet w IE7 😉 [ github ]

Dobra zaczynamy, najpierw mamy listę zwykłych obrazków a do tego możemy również wykorzystać picture

<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
...