Кратко

  • Первый публичный рабочий проект W3C от 14 сентября 2017 года описал асинхронные сообщения, когда наблюдаемый элемент пересекает порог относительно контейнера или видимой области.
  • Длинные страницы получили возможность откладывать изображения и содержимое без проверки раскладки при каждом движении. Действие после сигнала остаётся решением приложения.

Хранитель уже седьмой раз прошёл коридор архива. Тележка ещё не приехала. На восьмой попытке коллега предлагает поставить у дверей звонок. Это не ускорит тележку, зато освободит ноги хранителя для других дел. Программы длинных страниц делали тот же лишний поход: во время прокрутки снова и снова спрашивали браузер, насколько далёкая фотография приблизилась к экрану.

Первый публичный рабочий проект W3C от 14 сентября 2017 года начал с цены такой привычки. Прямые запросы о положении элементов могли заставлять браузер заново рассчитывать стили и раскладку. Постоянный опрос в обработчиках прокрутки мог нарушать плавность движения. Среди задач были отложенная загрузка данных и DOM, отображение части длинного списка и определение положения элементов относительно видимой области. Предложение состояло в постоянной подписке на изменение, а не в бесконечной серии одинаковых вопросов.

У новой договорённости есть цель и корень. Целью служит наблюдаемый элемент. Корень — область сравнения: заданный контейнер или верхняя видимая область, если отдельный корень не указан. IntersectionObserver создают с функцией обратного вызова и настройками. observe(target) начинает следить за элементом, unobserve(target) прекращает наблюдение именно за ним, disconnect() прекращает работу всего наблюдателя. Когда пересечение проходит заданную границу, функция получает записи. У двери архива появляется звонок вместо очередного бегуна.

Граница настраивается. rootMargin увеличивает или уменьшает прямоугольник корня для расчёта. Это позволяет получить сигнал о фотографии до того, как она окажется на самом экране, и заранее начать загрузку. Значения threshold задают доли пересечения, при которых нужны сообщения. Запись содержит цель, время, ограничивающие прямоугольники, прямоугольник пересечения и intersectionRatio. Фотогалерея может подготовить следующую картину раньше; длинный список — подождать. Браузер даёт геометрию, редакция выбирает расписание.

Сам наблюдатель ничего не загружает. Получив запись, страница может запросить файл, показать карточку, создать новые строки или просто отметить событие. Проект отдельно объяснял пользу unobserve() для ленивой загрузки: когда элемент понадобился и работа выполнена, следить за ним дальше незачем. Если папка уже лежит на столе, звонок о её прибытии больше не нужен.

Асинхронность здесь намеренная. Проект 2017 года считал, что описанные задачи не требуют жёсткого ответа в ту же миллисекунду. Небольшая задержка лучше постоянных синхронных чтений раскладки при прокрутке. Документ также не ставил целью точное установление всех пикселей, которые оказались на экране после фильтров и компоновки. API сообщает о пересечении фигур по своим правилам. Понял ли человек содержание фотографии, геометрия не скажет.

Последний опубликованный проект W3C сохраняет основную конструкцию: цели, корень, пороги и асинхронные записи. Официальная история публикаций начинается с первого проекта в сентябре 2017 года и перечисляет последующие Working Drafts до октября 2023 года. Это история документов, а не статистика установок браузеров. Текст 2023 года в этой серии тоже назван Working Draft.

Польза общего сигнала растёт вместе с длиной страницы. Каталог может наблюдать за несколькими карточками одним объектом и заранее готовить ближайшие. Фотоочерк может загрузить следующую фотографию, пока до неё осталась часть экрана. Список может прекратить наблюдение за уже обработанными пунктами. Каждый разработчик больше не обязан изобретать собственную петлю из событий прокрутки, запросов координат и догадок о времени. Общий механизм сообщает о границе; за выбор файлов и расход сети отвечает сайт.

Есть соблазн выдать пересечение за внимание читателя. intersectionRatio выражает долю рассчитанного геометрического пересечения. Человек мог внимательно посмотреть на изображение, мгновенно пройти мимо или вообще отойти от компьютера. Звонок архива доказывает прибытие папки к двери, а не интерес исследователя к её содержимому. Точная формулировка измеряемого события делает результат полезным.

Intersection Observer не предписал всем страницам одинаковую загрузку. Он убрал необходимость спрашивать о далёком изображении после каждого движения. Страница назначает порог, браузер сообщает о пересечении, приложение решает, что вынести со склада. Хранитель наконец может заняться папками, которые уже доставлены.