Utiliser & # 39; Optimiser l’api de visibilité pour le développement dynamique de WordPress

Toutefois, il est plutôt peu fiable; Sans parler du fait qu’il ne fonctionne pas du tout dans le nouveau navigateur. Au lieu de cela, une nouvelle API de visibilité a été introduite en 2011, avec des scores de disponibilité très élevés. Cependant, il n’inclut pas IE9 ou plus tôt.
L’API visibilité vous indique l’état actuel de la page, si elle est affichée, visible, invisible, etc. Bien que les implémentations de l’API de visibilité soient courantes, elles sont clairement basées sur des préfixes spécifiques au fournisseur. Ce n’est qu’une autre preuve que la responsabilité de la personne qui a créé le navigateur d’utiliser des préfixes spécifiques au fournisseur nous rend fous. Heureusement, l’API de visibilité a des enveloppes qui rendent les préfixes invisibles pour nous. Dans cet article, je vais expliquer comment utiliser la visibilité. Andrey sitnik JS. Ce wrapper est très facile à utiliser et est inclus dans une licence compatible mit GPL, ce qui le rend sûr pour les projets WordPress.
Vous pouvez l’ajouter au projet en tant que dépendance en utilisant tous les systèmes de gestion des dépendances populaires, ou vous pouvez le charger via CDN. Je suis sûr que vous avez raison. En utilisant l’emballage de visibilité dans les deux prochaines sections, je vais vous montrer deux façons simples de mettre en œuvre l’emballage de visibilité pour résoudre les deux problèmes que j’ai discutés dans l’introduction de cet article. Je n’afficherai ces deux exemples que dans JavaScript. Remarque: Assurez – vous qu’ils sont correctement mis en œuvre dans le plug – in ou le sujet. Exemple 1: autoplay YouTube Video YouTube fournit une API pour télécharger des vidéos à iframe. C’est simple. Si vous regardez l’exemple de code, vous verrez qu’un événement s’exécute lorsque la vidéo est chargée. Dans la fonction de rappel de cet événement, ils montrent comment lire la vidéo. Voici à quoi il ressemble:
Fonction onplayerready {
Événements Objectifs Lire la vidéo ();
} utilisez l’emballage de visibilité. JS, nous pouvons changer
Avec une édition très simple, la fonction de ne pas démarrer la vidéo tant que la page n’est pas visible: Fonction onplayerready {
Visibilité Onvisible (fonction () {
Événements Objectifs Lire la vidéo ();
});
} Le comportement est le même si la page est affichée dans l’onglet navigateur actif. Par contre, si quelqu’un ouvre une page dans un onglet inactif, la vidéo ne démarre pas tant que l’onglet n’est pas de nouveau actif.
La même politique peut être appliquée à différentes situations. Par exemple, si vous utilisez un curseur, vous voudrez peut – être commencer la présentation seulement si la page est réellement visible. Exemple 2: la fonction de synchronisation JavaScript améliorée fournit un moyen très simple de répéter la même fonction dans une plage prédéfinie. Voici l’exemple le plus basique: setinterval (Function () {
Console. Journal de bord (\
}, 10 000); Ceci enregistre le mot \
Considérons maintenant cette fonction de Timing: setinterval (Function () {
$. Get (URL, {Action: \
Fonction (réponse)
Fais quelque chose.
}
);
}, 10 000); Il enverra une demande Ajax toutes les dix secondes. Chaque visionneur actif a plus de six demandes de serveur par minute. Si vous avez besoin de ce sondage continu, c’est bien, mais si quelqu’un ouvre la page, lit pendant cinq minutes, puis laisse l’onglet s’ouvrir mais n’est pas actif pendant une journée, votre serveur reçoit plus de 8000 requêtes inutiles. Même si c’est
Des technologies comme les websockets peuvent bien résoudre ce problème. Les plugins WordPress ou les développeurs de thèmes ne peuvent pas se fier aux websockets ou à des technologies similaires utilisées à moins qu’ils n’écrivent du Code pour un site spécifique et qu’ils sachent que les websockets sont utilisés.
Le wrapper de l’API de visibilité dont j’ai discuté à l’étape précédente peut également être utilisé au lieu de setinterval, mais la fonction de rappel ne s’exécute que lorsque l’onglet courant est visible. Voici le dernier exemple, reconstruit pour fonctionner seulement lorsque l’onglet courant est visible: visibilité. Chacun (10 000, fonction () {
$. Get (URL, {Action: \
Fonction (réponse)
Fais quelque chose.
}
);
}); Lorsque la page est dans un onglet visible, elle se comporte exactement de la même façon que lorsque vous utilisez setinterval. Mais rien ne se passe quand la carte n’est pas visible. En plus de réduire l’utilisation des ressources sur le serveur et l’ordinateur du visiteur, il est préférable que la fonction de rappel fonctionne dès que l’onglet est visible.
Au fur et à mesure que nous créons de plus en plus d’applications interactives avec wordpress, nous comptons sans aucun doute sur la communication bidirectionnelle entre le client et le serveur. Il est important de trouver des moyens efficaces de le faire. Compte tenu de cela, il n’est pas surprenant de voir Automatic comme le sponsor de socket. Me, un excellent système basé sur les noeuds. JS est utilisé pour la communication en temps réel entre le client et le serveur. Pour une utilisation plus traditionnelle de WordPress, l’api visibilité est un outil important pour améliorer l’efficacité et la disponibilité des plug – ins, des thèmes et des applications. Je vous ai montré deux exemples simples que vous trouverez utiles et adaptés à vos besoins. Plus important encore, j’espère que vous trouverez maintenant de nouvelles façons d’ajouter une interaction bidirectionnelle à votre site WordPress.