Ответ
Intersection Observer — это API, позволяющий асинхронно отслеживать пересечение элемента с его родителем или viewport. Он эффективен для ленивой загрузки, бесконечного скролла или анимаций при появлении элемента.
Пример использования:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Отключаем наблюдение после появления
}
});
}, { threshold: 0.1 }); // Срабатывает при 10% видимости
document.querySelectorAll('.lazy-load').forEach(el => observer.observe(el));Плюсы:
- Высокая производительность (не использует scroll/listener)
- Гибкость (настройка root, threshold, rootMargin)
- Поддержка во всех современных браузерах
Ответ 18+ 🔞
А, слушай, вот эта штука — Intersection Observer, она вообще огонь! Ну представь, тебе надо отследить, когда какой-то элемент на странице появляется в зоне видимости. Раньше бы пришлось на скролл вешать слушатель, который каждую миллисекунду долбит браузер вопросами «ну что, видно уже? а щас?», и всё это жрало производительность, как голодный студент доширак. А тут — раз, и готовое решение, которое само тебе скажет, когда элемент показался, и не будет мозг ебать лишний раз.
Вот смотри, как это выглядит в коде, тут всё просто, как три копейки:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Отключаем наблюдение после появления
}
});
}, { threshold: 0.1 }); // Срабатывает при 10% видимости
document.querySelectorAll('.lazy-load').forEach(el => observer.observe(el));Суть в чём: ты создаёшь этого «наблюдателя», говоришь ему: «Слушай, чувак, вот эти все элементы с классом .lazy-load — следи за ними». И как только какой-то из них хотя бы на 10% (потому что threshold: 0.1) вылезет в твоё окно просмотра, он тебе тихонько на ушко: «Йоу, этот уже виден». И ты можешь сделать с ним что угодно — класс добавить для анимации, картинку лениво подгрузить, или, как в примере, сразу отписаться от слежки, чтобы больше не париться.
А почему это, блядь, так охуенно?
- Производительность — просто пиздец. Браузер сам, где-то глубоко внутри, на уровне движка, оптимизированно следит за пересечениями. Никаких вечных циклов и проверок вручную. Тишина, покой, анимации плавные.
- Гибкость — хоть заебись. Можно следить не только за тем, когда элемент в окне браузера появляется, но и за его пересечением с любым другим элементом-родителем (
root). Можно настраивать пороги срабатывания (threshold), от 0 до 1. Можно даже сделать отступы (rootMargin) — типа «считай, что элемент виден, когда он ещё за 100 пикселей до границы». Вообще красота! - Поддержка — везде, кроме совсем древних уродов. Все современные браузеры уже давно это жуют. Для особо упоротых случаев есть полифилы, конечно.
Короче, если тебе нужно что-то делать в момент появления элемента — забудь про свои костыли со скроллом. Это как перейти с допотопного топора на бензопилу. Разница — просто ебать!