Wie kann ich Font Awesome-Platzhaltersymbole ausblenden, bis die Schriftart geladen wird?

Bestimmen des Schriftartladestatus für die Symbolanzeige

Problem:

Bei Verwendung von Font Awesome werden Symbole zunächst mit Platzhalterzeichen angezeigt bis die Schriftartdateien geladen sind. Um dieses Problem zu beheben, besteht die Aufgabe darin, diese Platzhaltersymbole während des Ladevorgangs zu verbergen.

Lösung:

Um den Ladestatus der Schriftartdatei zu erkennen, nutzen Sie das jQuery-FontSpy-Plugin . Dieses Plugin wertet Schriftbreitenunterschiede zwischen der gewünschten Schriftart und einer beliebigen Fallback-Schriftart aus. Stimmen die Breiten überein, bleibt die gewünschte Schriftart ungeladen; andernfalls wurde es erfolgreich geladen.

Plugin-Implementierung:

1. Fügen Sie das jQuery-FontSpy-Skript ein:

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

2. Initialisieren Sie das Plugin auf der gewünschten Seite Element:

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

3. Definieren Sie die Stile für Lade- und Fehlerzustände:

.fa-loaded {
  display: block;
}

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

Mit jQuery-FontSpy werden die Icons zunächst ausgeblendet. Beim Laden der Schriftart wird die Klasse „onLoad“ angewendet, wodurch die Symbole eingeblendet werden. Wenn die Schriftart nicht geladen werden kann, wird die Klasse „onFail“ angewendet, sodass die Symbole ausgeblendet bleiben. Dieses Plugin ermöglicht eine präzise Steuerung der Symbolanzeige und sorgt so für ein optimales Benutzererlebnis, noch bevor die Schriftart vollständig geladen ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Font Awesome-Platzhaltersymbole ausblenden, bis die Schriftart geladen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!