Infini indigène avec l'API IntersectionObserver

API de l'observateur d'intersection: surveiller efficacement la visibilité de l'élément DOM

L'API de l'observateur d'intersection est une API JavaScript côté client émergent pour surveiller efficacement la visibilité des éléments DOM spécifiés, ce qui est utile pour des fonctionnalités telles que le chargement paresseux, le défilement infini et la visibilité AD.

Prise en charge du navigateur et polyfill

Cette API est relativement nouvelle et a actuellement une prise en charge limitée du navigateur, notamment Chrome Desktop Edition 51, Chrome Android Edition 51, Android WebView 51, Opera 38 et Opera Android Edition 38. Cependant, un polyfill en développement est fourni sur GitHub, permettant aux développeurs de commencer à utiliser immédiatement des observateurs d'intersection.

Guide d'implémentation de défilement infini

Cet article fournira des descriptions détaillées sur la façon d'utiliser l'API et le polyfill intersectionObserver pour obtenir un mode d'expérience utilisateur de défilement illimité, y compris les paramètres de page, la création de scripts et la gestion des éléments sentinelles. Le guide contient des fonctionnalités ES6 / ES2015 telles que la promesse, les chaînes de modèle et les fonctions de flèche.

Concept de base: élément Sentinel

L'idée principale de l'implémentation de défilement infini est d'utiliser un élément en bas de la liste en tant que "sentinelle", qui déclenchera plus de contenu à charger lorsque la fenêtre du navigateur s'approche du bas de la page.

Paramètres de page (html)

La structure du corps de la page est une liste simple:

<ul class="listview"></ul>

Pour simplifier le code, les éléments de liste initiale et les pages suivantes seront chargés dynamiquement via JavaScript. Nous incluons également le polyfill et affichons le message rapide si l'API ne le prend pas en charge:

<div class="polyfill-notice">The polyfill is in use</div>
<🎜>

Le style CSS est utilisé pour définir la mise en page et les styles d'invite de la vue de la liste (voir la feuille de style pour plus de détails).

Création de script (javascript)

Tout d'abord, instancier un objet IntersectionObserver:

sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1});

threshold: 1 signifie que l'écouteur d'événements ne sera déclenché que lorsque l'élément est complètement dans la fenêtre. Les éléments sentinelles sont marqués de frontières orange pendant la démonstration.

L'auditeur d'événements

effectuera des opérations telles que la suppression de la sentinelle actuelle, la définition d'un indicateur de chargement en bas de la liste et l'utilisation de la méthode nextPage pour charger la page suivante. La méthode nextPage renvoie une promesse indiquant quand ces opérations sont terminées. Après cela, nous pouvons sélectionner le nouvel élément Sentinel et désactiver l'indicateur de charge:

sentinelListener = function(entries) {
  sentinel.unset();
  listView.classList.add('loading');
  nextPage().then(() => {
    updateSentinel();
    listView.classList.remove('loading');
  });
};

updateSentinel Méthode Sélectionnez la nouvelle sentinelle et sélectionnez le premier élément de la page nouvellement chargée:

updateSentinel = function() {
  sentinel.set(listView.children[listView.children.length - pageSize]);
};

Le reste du code implémente principalement la fonction nextPage. Lorsque la promesse renvoyée par loadNextPage() (demande de réseau simulée) est résolue, l'objet du projet fourni sera rendu en HTML et ajouté à la fin de la liste.

lecture complémentaire

Plus de documentation sur l'API et ses principes:

• IntersectionObserver est en vue
• Les observateurs de l'intersection ont expliqué
• MDN - API IntersectionObserver

Intersection Observer API FAQ

(La section FAQ est omise ici car le texte d'origine contient une réponse complète et claire.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!