React Intersection Observer (scroll + lazy-load картинок)
Представьте, что вам нужно определить, что какой-то конкретный попал в область вашего экрана на 10% или 100%, после чего необходимо выполнить какое-то действие? Например, анимировать элемент.
React Intersection Observer идеально справится с этой задачей!
Нужно определить, что пользователь дошел до конечного скролла? Юзай Intersection Observer.
Нужно сделать ленивую подгрузку картинок? Вперёд вместе с React Intersection Observer!
Например, в Эльдорадо необходимо было динамически подгружать отдельные компоненты, когда на экране отобразился какой-нибудь элемент или отправлять отчет в аналитику о том, что пользователь увидел баннер и там мы юзали именно эту библиотеку.
⏰ Таймкоды:
00:00:00 Введение
00:50:00 Делаем неправильно с помощью scroll
05:25:00 Что такое Intersection Observer
10:25:00 Делаем правильно с помощью React Intersection Observer
15:04:00 Делаем ленивую подгрузку картинок
🔗 Следите за обновлениями и информацией в:
— Telegram-канале: https://t.me/archakov_im
— VK: https://vk.com/archakov_im
— Личном блоге: https://archakov.im
— GitHub: https://github.com/Archakov06
— Моё резюме: https://career.habr.com/archakovim
#react #scroll #intersectionobserver #observer #js #javascript #junior #реакт #разработка
Watch video React Intersection Observer (scroll + lazy-load картинок) online without registration, duration hours minute second in high quality. This video was added by user Archakov Blog 06 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 25,736 once and liked it 1.3 thousand people.