React Intersection Observer (scroll + lazy-load картинок)
ฝัง
- เผยแพร่เมื่อ 5 ธ.ค. 2022
- Представьте, что вам нужно определить, что какой-то конкретный попал в область вашего экрана на 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-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
#react #scroll #intersectionobserver #observer #js #javascript #junior #реакт #разработка
![[FULL EP.01] LOL: Last One Laughing Thailand Thailand หัวเราะทีหลังปังกว่า | Prime Thailand](http://i.ytimg.com/vi/t4KunBRKn3s/mqdefault.jpg)
![[ПЕРЕЗАЛИВ] Собеседование в EnjoyPro middle frontend-разработчиком с ЗП 180K](/img/n.gif)
Спасибо за труд, очень полезное видео
React Intersection Observer / scroll / lazy-load / ленивая загрузка
Просто огонь. Спасибо за гайд. Побольше таких❤️
Чувак, благодарю тебя за твой контент, что ты делаешь, за твои старания, за твой труд. Недавно начал смотреть твои видосы, поверь кто бы что бы не говорил ты лучший, они просто завидуют. Охринительный контент))
Выл бы очень благодарен, если бы ты хоть пару уроков как со сникерсом, пиццей сделаешь на Vue JS, было бы очень охриневательненно😊
мой любимый канал по разработке! сейчас делаю диплом и добавляю intersection observer
Вау, спасибо огромное , как раз хотел реализовать подгрузку
очень крутой видос! спасибо! про Обсервер знал, но все равно что-то новое подчерпнул!)
Супер, спасибо за труды!
мужик, шикарное объяснение! спасибо!
Класс, новый ролик, давно не было!
upd: интересный контент, observer универсальным показался, всякие транзишены, для которых раньше lax или aos использовал, при желание можно заменить этой функцией
Лучший!Жду новых роликов + про собес
Контент шикарен, спасибо!!
Спасибо большое за информацию!
Спасибо за ролик, очень важный хук
супер классно объяснил и показал👍
Отличное объяснение!
Братан, ты просто лучший)
Больше таких видео 🔥
Привет! Давно не было вас тут) хотя я гейм разработчик но ваши ролики для меня как медитация на фоне.
Автору респект и уважуха
спасибо, очень помог!)
Спасибо автору за ролики, по моему недооцененный канал по рякту!
Автор спас меня😊
Ништяк! Спасибо!
Шикарный способ, жаль раньше не узнал о нем
Наконец то новый видео 🙂
Спасибо, все понятно
Спасибо, ждём новые видео
Лучший!
Спасибо👍👏
Супер!
Привет! Очень хотелось бы увидеть интеграцию платежной системы, всех благ!
Согласен полностью! Поднимите пожалуйста коммент в топ, чтобы автор увидел 🙏
респект тебе
Саг ва! Супер!
Полезно
Класс
Thanks!!!!
не приятно лишь то, что тыкаешь).Мог бы обращаться на ВЫ.Так приятней.
Вери спасибосо!
🔥🔥🔥🔥🔥
Дякую тобі тільки що, внедрив на продакшині infinite scroll))
Спасибо! Будут ли уроки про next 13))?
Пример с фото спорный. Intersection Observer может следить сразу за множеством элементов, а на примере, каждая фото порождает свой экземпляр наблюдателя и естественно, кушает больше аппаратных ресурсов устройства
Я сам писал похожий хук, по сути на мдн есть вся инфа, но, думаю, прямо начинающим эта либа будет удобна
Какое расширение при выделение слова используется в браузере
Очень понравилось, минималистичное, красивое
также рекомендую юзать для блокировки скролла при открытии модалки на модалки
Возможно ли наблюдать за элементами с помощью IO используя реактовские рефы через useRef? У меня вылетает ошибка "Cannot read properties of undefined (reading 'isIntersecting')"
Подскажите а где можно Photo.jsx найти?
Приветствую! Подскажите, я вот чего не пойму, Webpack и Babel уже установлены ж в React или нет? Смотрю в интернете, но каждый раз они устанавливают его отдельно, хотя в node models там уже есть эти пакеты. Что тут происходит?
если через шаблон create-react-app устанавливаешь реакт, то там уже есть вебпак, а если сам ставишь, то уже самому надо все делать
Подскажите, есть ли у автора канала полные платные курсы по фронту? На Udemy, например
Подскажите название цветовой темы
Расскажите почему всплывают 3 лога?
Можно этой библиотекой сделать так, что бы на странице всегда было 15 елементов. Типо вниз до 20 дошел, и первые 10 удалил?
Наставничество еще ведешь?
Ну у атрибута лэзи тоже неплохо с поддержкой, может чуть хуже, но не так критично, чтобы не юзать его.
МММ А Как применить этот хук допустим к 5 разным элементам в разных метах сайта
Спасибо за ролики , я их очень ценю
Однако эта тема и так раскрывалась на лерн джава скрипте , а отптимизировать полученение элементов и их кординат можно просто получив их кординаты единожды
Было бы более классно если бы раскрыл нам менее очевидные темы
например ты мог бы показать нам ssr на ноде , на примере того приложения с пиццей
показать как работает стриминоговый сервис
показать подключение авторизации через гугл или соц сеть
Когда новая реaк
т пицца?
А если нужно за несколькими элементами следить как быть?
Вешать несколько обработчиков
@@ArchakovBlog Не получилось. Вешаю ref на 2 блока как доходит до 2-го блока срабатывает одновременно на первом и втором. Мне нужно чтоб по очереди срабатывало( Все равно спасибо большое, многому у тебя научился.
Ангуляр топ!!!
отдельный лайк
@@ArchakovBlog 😁
В чем ценность урока? Установить пакет с хуком? Если бы сам написал этот хук - другое дело
Спасибо за видео. Создание для каждой картинки нового IntersectionObserver, не бьёт по производительности? Я для такой задачи создавал один IntersectionObserver для родительского контейнера картинок и потом наблюдал за каждой картинкой - Array.from(imgsWrapper.current.children).forEach((item) => observer.observe(item));