Introduction détaillée et exemples d'utilisation des compétences du didacticiel HTML5 visibilitéStateattribut_html5

Il faut expliquer ici que cette « activation » indique si ce label est parcouru par l'utilisateur, ou s'il s'agit du label actuel.

Alors, à quoi sert exactement cette API ? Habituellement, de nombreuses pages traditionnelles continuent de fonctionner lorsque l'utilisateur ne les active pas. Par exemple, lorsque l'utilisateur navigue sur un portail d'actualités, la page du jeu NBA qu'il a ouverte auparavant continuera à s'actualiser pour obtenir les derniers résultats, et les sites Web de vidéos le feront. Continuez à occuper la bande passante lors du chargement des ressources, donc s'il y a trop de travail inutile, cela entraînera un gaspillage important de ressources. Ce produit est donc très utile :

1. Le programme Web mettra automatiquement à jour les informations de la page de temps en temps pour garantir que les utilisateurs obtiennent des informations en temps opportun. Cependant, lorsque les utilisateurs parcourent d'autres pages, ils peuvent le contrôler pour suspendre la mise à jour.
2. Les sites Web vidéo continueront à charger des vidéos lors de la lecture de vidéos en ligne jusqu'à ce que la vidéo soit chargée. Cependant, lorsque les utilisateurs parcourent d'autres pages, ils peuvent suspendre le chargement des ressources vidéo pour économiser de la bande passante.
3. Il y a un grand diaporama sur la page d'accueil du site Web qui est automatiquement lu lorsque l'utilisateur parcourt d'autres pages, la lecture peut être interrompue.

Ainsi, grâce à la visibilité de la page, nous pouvons obtenir au moins un ou plusieurs des avantages suivants :

1. Enregistrez les ressources du serveur. L'utilisation des ressources du serveur telle que l'interrogation Ajax est souvent ignorée. La désactivation de ce type de requête peut économiser des ressources.
2. Économisez la consommation de mémoire.
3. Économisez la consommation de bande passante.

Par conséquent, l’utilisation de la visibilité de la page présente des avantages à la fois pour l’utilisateur et pour le serveur.

Ce qui suit est une introduction formelle à cette API. Page Visibility ajoute deux propriétés masquées et visibleState à l'objet document du navigateur. Si la balise actuelle est activée, la valeur de document.hidden est false , sinon elle est true . visibilitéState a 4 valeurs possibles :

1.hidden : lorsque le navigateur est réduit, que les onglets changent ou que l'ordinateur est verrouillé, la valeur de visibilitéState est masquée
2.visible : Lorsque le document du contexte de niveau supérieur du navigateur est affiché sur au moins un écran, visible est renvoyé ; lorsque la fenêtre du navigateur n'est pas réduite mais que le navigateur est bloqué par d'autres applications, il est également visible
3.prerender : renvoie le pré-rendu lorsque le document est chargé en dehors de l'écran ou invisible. Il s'agit d'un attribut non essentiel et le navigateur peut éventuellement le prendre en charge.
4.unloaded : renvoie déchargé lorsque le document est sur le point d'être quitté (déchargement). Le navigateur peut également éventuellement prendre en charge cet attribut

De plus, un événement de changement de visibilité sera ajouté au document, qui se déclenchera lorsque la visibilité du document change.

D'accord, après avoir introduit les attributs, donnons un exemple d'utilisation (copiez le code et enregistrez-le dans un fichier HTML, ouvrez-le et changez de balise pour tester l'effet).

Le but de cette instance est de surveiller si la visibilité de l'étiquette change et de générer une invite lorsque la visibilité de l'étiquette change.

Il convient de noter qu'à l'heure actuelle, les navigateurs prennent toujours en charge la visibilité des pages via des attributs privés. Par conséquent, lors de la détection ou de l'utilisation des attributs fournis par la visibilité des pages, vous devez ajouter le préfixe privé du navigateur, par exemple en détectant ce qui précède dans la propriété visibilitéState de Chrome. , vous devez détecter document.webkitVisibilityState au lieu de document.visibilityState. Par conséquent, la démo détectera d’abord le type de navigateur, puis utilisera l’API Page Visibility.