Простые решения для сложных задач с Intersection Observer API
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2024
- Ленивая загрузка, бесконечный скролл и многие другие крутые фишки сегодня можно легко реализовать, используя браузерный API Intersection Observer. В рамках видео мы рассмотрим четыре практических примера, на которых разберем как работать с данной возможностью.
Intersection Observer MDN developer.mozilla.org/ru/docs...
Код из видео:
lazy loading codesandbox.io/s/lazy-loading...
воспроизведение видео codesandbox.io/s/video-autost...
якорное меню codesandbox.io/s/anchor-menu-...
бесконечный скролл codesandbox.io/s/blissful-roe...
00:00 Обзор Intersection Observer API
01:48 Ленивая загрузка изображений
09:19 Запуск/остановка видео
15:24 Переключение вкладок якорного меню
22:01 Бесконечный скролл
#js Текстовая версия t.co/lFC7fpo106
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Спасибо Михаил за подробный обзор!
Михаил, спасибо за труды!
Спасибо за материал! Подача огонь 🔥
Огромное спасибо за контент! Как всегда очень полезно!
Спасибо за ваш труд! Очень полезная информация!
Михаил, спасибо вам за подробное объяснение! Вы замечательный преподаватель! Желаю развития вашему каналу!
Какой же у вас годный контент! Спасибо!!!
Михаил, спасибо огромное за Ваш труд! Очень полезное видео. Бегу пробовать эту апишку)
Самое понятное видео на эту тему, спасибо!
Михаил, мое почтение. За одно видео ответил на уйму волнующих вопросов! Лучший !
Огромное спасибо! Через такие костыли делал подгруку, а оказывется есть такой прекрасный инструмент!
Великолепное объяснение. Спасибо за видео!
Один из лучших каналов, постепенно просматриваю все видео отсюда)
Спасибо! Полезный материал с хорошим пояснением.
Спасибо за урок, достаточно понятно и с реальными примерами
Очень нужная тема, спасибо!
Класс! Давно хотел разобраться, а тут Михаил такой урок сделал! Спасибо!
Хорошо и понятно рассказываешь, редко такое видишь.
Очень крутой контент и подача, спасибо!
я в очередной раз удивляюсь, на сколько ваш контент актуален в моем рабочем проекте, спасибо за труды)))
Невероятно круто, большое спасибо за видео.
Супер. Огромное спасибо!
Отличный урок , спасибо Михаил
Сегодня узнал о нем, а вчера Михаил выпустил видео о о нем) Спасибо за видео.
С нетерпением буду ждать ещё подобного материала! Вы у меня в Топ-3 ютуба!!!
Благодарю, урок отличный и познавательный, больше всего узнала именно из вашего видео.
Круто объяснил!
Спасибо огромное очень помог !
Очень интересное видео, оно сто процентов пригодится, спасибо вам за все Михаил
Спасибо за видео ЛАЙК и ждем новых видосов!!!
Пару недель назад приходилось изучить observer api и внедрить в задачу) в принципе ничего сложного, но это видео очень полезное и я к нему буду возвращаться точно. Понимание расширилось и теперь хочется заняться практикой на всех своих проектах)) очень полезная штука. А автор как всегда лучший! Честно говоря среди огромного количества каналов, для меня этот один из лучших точно. Михаил) спасибо! Обязательно возьму ваши курсы на udemy
Объяснение супер!!!
спасибо за видео👍
Лучшее объяснение Intersection Observer
Очень крутое видео! Спасибо!!!! 😊
Полезно, спасибо!
Молодец, большое спасибо), оч доступно
Спасибо за урок
Продолжай в том же духе!)
отличный разбор
Отличный контент. Комментарий в поддержку канала
Спасибо Михаил!
очень полезная информация!
Спасибо!
Спасибо. Полезно
Отличный видос, Михаил! Актуальные браузерные апишки - это годнота)
Сегодня видел прикольную штуку Intl.ListFormat для склеивания массива строк в строку.
@@mishanep тоже вчера видел) Было бы круто собрать видос по этому могучему объекту, там уже целый новый мир)
ЭТО!... ПРОСТО!... ОХ...очень полезный материал! Очень класно доносите информацию, Михаил! Контент максимально информативен - что по Реакту, что по JS в целом.
Действительно, незаслужено малое количество подписчиков, ведь для вашей целевой вы отличный лектор, ментор, учитель или преподаватель. Но дорогу осилит идущий. С таким качественным контентом быстрый рост подписчиков гарантирован. Главное - регулярность и не останавливаться на достигнутом. Успехов Вам, Михаил! И побольше лайков под видео ;)
да, действительно полезный материал и доступный
просто лучший.
Топчик!
Топ как всегда.
ооо, круто, спасибо
Спасибо!Как все легко, я пол ютуба перерыла, а решение здесь))
Супер)
Очень нравиться твоя подача! Но это мне сломало мозги, пойду дальше учить html/css/js xD Когда нибудь это тоже пойму! Спасибо за хорошие уроки!
Круть, видел данную. апишку на инфинит скролле в реакте
Уважуха)
очень крутое видео
thnx fr th vd, круто
как всегда супер. Зделай видео пo GraphGL + React пажалустаааааааа
И туда однажды доберемся)
Очень полезно и информативно. Просмотров почему-то мало.👍
Но никак не пойму, что делает опция root на 0:50 и как его использовать ? Но уже загуглил и понял.)
Большое спасибо за вашу работу.
Хотел спросить что на сегодняшний день лучше учить JOI или YUP.
и может снимите ролик на эту тему в нете я нашел только англоязычные ролики
Отлично! Наверное, то что искал.
А как реализовать такой функционал у меню, чтобы оно автоматически прокручивалось к "активным" пунктам (которые не вмещаются на экране), при скроллинге страницы?
))) я тут курсы у вас на юдеми покупал, а вы ещё бесплатно курсы тут преподаете
А если у тебя элемент на первом экране, т.е. по умолчанию пересечён, будешь от обратного идти или по старинке отслеживать позицию скролла? Ну и хотелось бы увидеть пример с root не null
Спасибо за видео, Михаил! Не знаю почему, но у меня rootMargin срабатывает только если прописано одно значение, например, rootMargin: "50px". Если пишу, например, rootMargin: "50px 0px 0px 0px" rootMargin не работает 🙃 Поделитесь если кто-то столкнулся с подобным и нашел решение.
Михаил, подскажите пожалуйста, как реализовать пример с якорным меню в React. Если я правильно понимаю, то там нужно использовать API react-intersection-observer. Вот с ленивой загрузкой изображений и запуск/остановка видео у меня получилось сделать, а вот с якорным меню некий ступор возник. Буду признателен, если покажете решение.
Здесь надо посидеть-подумать-погуглить. На первой напрашиваются два решения: либо хранить текущее положение в сторе и обновлять его через обзервер, либо использовать роутинг и через обзервер обновлять url по достижению якоря. Но вполне возможно есть более элегантное решение.
Internet Explorer хотя бы 11 поддерживал... а так да, круто и библиотеки не нужны, спасибо!
Сочувствую, если вам приходится поддерживать IE.
Привет из Узбекистана! пожалуйста, сделайте полное видео о наборе инструментов redux toolkit, об использовании его с почтальоном. Заранее спасибо !
С каким почтальоном? :)
@@mishanep Печкиным, полагаю:)))
ой Извините Я допустил ошибку ): с postman
@@abdulvahhabakbarov7850 postman обычно используется бэкенд разработке для написание рест запросов. Redux toolkit это стейт менеджер точнее загатовка для редукса
А как сделать так, чтобы при скролле наврех обзёрвер отарабатывал, когда элемент пересекает своей верхней частью верх экрана (и уходит дальше наверх за пределы экрана), а при скролле вниз, обзёрвер отрабатывает тогда, когда элемент наоборот только начинает появляться сверху (то есть пересекает своей нижней частью верхнюю чать экрана)?
Как я понимаю, для этого в первом случае обзёрвер должен срабатывать при threshold: 1 (условно будем считать, что высота элемента примерно равна высоте viewport'a), а во втором случае при threshold: 0. И вот как это совместить? Я пока не смог придумать...
Вроде все логично и понятно, а потом оказывается, что intersectionRatio возвращает не процент, который занимает элемент относительно рута, а процент относительно самого элемента. То есть, если секция очень длинна, она может перекрыть почти весь вьюпорт, но intersectionRatio будет меньше 0.5 %)
Привет!!! А можете сделать видео как в React такое использовать?
Приветствую!
Для Реакта есть удобная библиотека react-intersection-observer. Я думал было снять видео с ее использованием, но реализовал всё намного проще и по-другому =) Тут всегда стоит вопрос, что мы хотим сделать, и уже под него подбираем инструменты.
th-cam.com/video/PGW36uIVggM/w-d-xo.html
@@mishanep Привет!!! Подскажите пожалуйста, какой командой стартануть проект? При старте npm start запускается, но пишет --- Note that the development build is not optimized.
To create a production build, use yarn build.
@@user-np4vg9pc5o вы всё правильно делаете. Это не ошибка. Уведомление просто уведомляет, что в дев режиме файлы не оптимизированы. Это нормально, так оно быстрее собирается для изменений и отладки. После npm run build или yarn build собирается продакшн вариант приложения, он оптимизирован.
@@mishanep Спасибо за ваши видео!!!
а как же поисковые роботы? ведь не видя картинок он не сможет их проанализировать
Это не всегда требуется. Сегодня множество сайтов с бесконечным скроллом и все картинки всё равно никогда не будут проиндексированы. Кроме того, есть разные подходы к ленивым картинкам, изначально картинка может быть отрисована в очень плохом качестве, и обновлена при подскролле к ней. У меня было видео об этом.
Этот канал уже превращается в классику Фронтенд туториалов для нас смертных, ГОДНОТА !!! 2023 год
Спасибо!