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.

A propos de l'auteur

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Ajouter un commentaire

Laisser un commentaire

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Sur les réseaux

Derniers articles