Resumo

  • O primeiro Working Draft público do W3C, de 14 de setembro de 2017, descreveu avisos assíncronos quando um elemento cruza um limite de interseção com um contêiner ou com a área visível.
  • A interface abriu caminho para adiar imagens e conteúdo em páginas longas sem consultar o layout a cada movimento. O aplicativo decide o que carregar depois de receber o sinal.

O bibliotecário foi ao depósito seis vezes. Na sétima, o colega mostrou a campainha da bancada. O livro não apareceu mais cedo; as seis caminhadas é que se revelaram desnecessárias. Durante anos, programas de páginas longas fizeram uma versão dessa ronda: mediam repetidamente onde estava uma foto que o leitor ainda não tinha alcançado, às vezes a cada movimento de rolagem.

O primeiro rascunho público do W3C, de 14 de setembro de 2017, explicou a conta. Perguntas explícitas sobre posições no documento podiam provocar recálculo de estilos e layout. Consultas contínuas e manipuladores de rolagem podiam prejudicar a fluidez. O texto citou carregamento posterior de conteúdo, listas extensas que mostram apenas uma parte dos dados e cálculos sobre a posição de elementos. O desenho proposto mudou o hábito: registrar uma pergunta duradoura e receber resposta quando algo relevante mudasse.

O elemento acompanhado chama-se target. A root é a região usada na comparação: um contêiner especificado pela página ou a área visível superior quando não há contêiner explícito. Um IntersectionObserver recebe uma função de retorno e opções. Com observe(target), o programa começa a acompanhar um elemento. Com unobserve(target), para aquele acompanhamento. Com disconnect(), encerra os acompanhamentos do observador. As entradas chegam quando a geometria atravessa os limites escolhidos. O depósito manda tocar a campainha quando o pedido atinge a bancada.

O limite pode ficar um pouco antes da porta. rootMargin aumenta ou diminui o retângulo de referência, permitindo que o aviso de uma imagem chegue quando ela ainda está abaixo do trecho visível. Os valores de threshold definem proporções de interseção que provocam notificações. Cada entrada informa o alvo, o tempo, retângulos e a razão de interseção. Uma página de fotografia pode iniciar uma busca com antecedência; uma lista animada pode esperar outro ponto. O navegador fornece as medidas, não a pauta da publicação.

Também não é o observador que carrega a foto. A função de retorno pode buscar um arquivo, revelar um cartão, criar itens da lista ou apenas registrar o acontecimento. O rascunho destacou unobserve() no caso de carregamento adiado: depois que a imagem entrou e o trabalho foi concluído, já não há motivo para continuar seguindo-a. Uma campainha útil deixa de tocar quando o livro foi entregue.

A entrega assíncrona era parte do plano, não um atraso acidental. O texto de 2017 observou que os usos descritos não exigiam precisão rígida de tempo. Receber a notícia um pouco depois podia ser melhor do que forçar leituras síncronas de layout a cada rolagem. O próprio documento excluiu do objetivo uma prova exata de quais pixels acabaram na tela depois de todos os efeitos de composição. A interface mede interseção geométrica sob regras conhecidas. O funcionário do depósito tampouco sabe se alguém gostou do livro.

O último rascunho W3C publicado preserva a ideia principal: observar alvos em relação a uma raiz e entregar alterações por meio de entradas e limiares. O histórico oficial começa com o primeiro Working Draft público de setembro de 2017 e lista novos rascunhos até outubro de 2023. Essas datas organizam os textos publicados; não medem adoção por navegadores. O documento de 2023 continua identificado como Working Draft naquela série.

O benefício de uma interface comum aparece quando há muito material fora da tela. Um catálogo pode acompanhar vários cartões com um observador e preparar só os que se aproximam. Uma reportagem pode reservar tempo para baixar a próxima imagem. Uma lista pode deixar de observar os itens já resolvidos. Antes, cada aplicação poderia montar seu próprio relógio de consultas de posição, pagando pela repetição e pelo eventual tropeço da rolagem. O padrão oferece uma campainha compartilhada; o site escolhe o serviço que vem depois do toque.

É fácil exagerar o significado do toque. intersectionRatio expressa a proporção geométrica de interseção calculada pela especificação. Ela não informa se uma pessoa olhou para a imagem, leu a legenda ou passou direto. A medida é útil justamente porque responde a uma pergunta delimitada. Uma biblioteca pode avisar que o livro chegou à mesa; não pode certificar que foi compreendido.

Intersection Observer não fez cada página carregar menos por decreto. Deu aos autores um sinal capaz de substituir uma parte das rondas repetitivas. O navegador avisa quando a fotografia se aproxima do ponto combinado. A página decide se é hora de ir ao depósito. O bibliotecário, enfim, consegue ficar no balcão.