DOM и React Senior DOM на практике обновлено
Ленивая подгрузка через IntersectionObserver
Условие
Функция lazyLoad(img, Observer) подставляет img.src из data-src, когда элемент попал в область видимости, и сразу отписывается. Конструктор наблюдателя приходит аргументом - так задача проверяема.
Что проверяют тесты
подставляет src при появлении
невидимый элемент не грузится
Как подойти
IntersectionObserver заменяет слушатель scroll с ручным расчётом координат: браузер сам считает пересечение, без дёрганья layout. Отписка после срабатывания обязательна, иначе колбэк будет вызываться при каждой прокрутке. Тот же приём - бесконечная лента и показы рекламы.
Подсказки: 2
- Колбэк получает массив записей, у каждой есть isIntersecting и target.
- После подстановки наблюдать за элементом больше незачем.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.