Focus sur : l’API Intersection Observer

Le dev du coin vous tient au courant des dernières avancĂ©es en matière de technos web et mobiles. Aujourd’hui, focus sur l’API Intersection Observer, une fonctionnalitĂ© dĂ©jĂ  supportĂ©e par certains navigateurs qui permet au dĂ©veloppeur d’exĂ©cuter des tâches en fonction de la visibilitĂ© d’un Ă©lĂ©ment sur la page.

Quoi ?
L’API Intersection Observer (specs) permet d’observer le positionnement d’un Ă©lĂ©ment par rapport Ă  la zone visible de la page, et d’exĂ©cuter un callback (fonction) lorsque le positionnement change. 

Démo de l'API Intersection Observer pour savoir si un élément est visible.
DĂ©mo de l’API Intersection Observer pour savoir si un Ă©lĂ©ment est visible.
L'API permet aussi de connaître le pourcentage visible de l'élément.
L’API permet aussi de connaĂ®tre le pourcentage visible de l’Ă©lĂ©ment.

VidĂ©o d’introduction Ă  l’API Intersection Observer (1:39)

Pourquoi ?
Cette API a pour but de simplifier le dĂ©veloppement et les performances de fonctionnalitĂ©s nĂ©cessitant de connaĂ®tre la position d’un Ă©lĂ©ment. Sans cette API, le seul moyen Ă©tait d’utiliser le scroll de la page et les coordonnĂ©es de l’Ă©lĂ©ment, ce qui est extrĂŞmement couteux en terme de performance. Exemples de cas d’utilisation : liste avec chargement infini, lazy loading des images, lancer la lecture d’une vidĂ©o uniquement lorsqu’elle devient visible, etc.

OĂą ?
Disponible sur les dernières versions de Chrome, Firefox et Edge. Attention, aucun support sur Safari, aussi bien sur desktop que sur mobile (caniuse.com).

Quand ?
Première adoption par Chrome en juin 2016.
Aucune date de release communiquée pour Safari.



Hello.
Mon nom est Vincent Ballut, je suis développeur web freelance basé à Paris. J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Ajouter un commentaire

Laisser un commentaire

Hello.
Je m'appelle Vincent Ballut,
développeur web
freelance.

Je publie des articles accessibles et pédagogiques sur tout ce qui touche au développement web et à ses problématiques.

Dans la vraie vie, je suis développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc).

J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Derniers articles