Comment puis-je masquer les icônes d'espace réservé de police impressionnante jusqu'au chargement de la police ?

Détermination de l'état de chargement des polices pour l'affichage des icônes

Problème :

Lors de l'utilisation de Font Awesome, les icônes s'affichent initialement avec des caractères d'espace réservé jusqu'à ce que les fichiers de polices soient chargés. Pour résoudre ce problème, la tâche consiste à masquer ces icônes d'espace réservé pendant le processus de chargement.

Solution :

Pour détecter l'état de chargement du fichier de police, utilisez le plugin jQuery-FontSpy . Ce plugin évalue les écarts de largeur de police entre la police souhaitée et une police de secours arbitraire. Si les largeurs correspondent, la police souhaitée reste déchargée ; sinon, il a été chargé avec succès.

Implémentation du plugin :

1. Inclure le script jQuery-FontSpy :

<script src="scripts/jquery-fontSpy.js"></script>

2. Initialisez le plugin sur le element:

$('.icon-container').fontSpy({
  onLoad: 'fa-loaded',
  onFail: 'fa-not-loaded',
});

3. Définissez les styles pour les états de chargement et d'échec :

.fa-loaded {
  display: block;
}

.fa-not-loaded {
  display: none;
}

Avec jQuery-FontSpy, les icônes seront initialement masquées. Lors du chargement de la police, la classe « onLoad » est appliquée, affichant les icônes. Si la police ne parvient pas à se charger, la classe « onFail » est appliquée, gardant les icônes masquées. Ce plugin offre un contrôle précis sur l'affichage des icônes, garantissant une expérience utilisateur optimale avant même que la police ne soit complètement chargée.

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!