Bagaimana Saya Boleh Menyembunyikan Ikon Pemegang Tempat Hebat Fon Sehingga Fon Dimuatkan?

Menentukan Status Muatan Fon untuk Paparan Ikon

Masalah:

Apabila menggunakan Font Awesome, ikon pada mulanya dipaparkan dengan aksara pemegang tempat sehingga fail fon dimuatkan. Untuk menangani perkara ini, tugasnya adalah untuk menyembunyikan ikon pemegang tempat ini semasa proses pemuatan.

Penyelesaian:

Untuk mengesan status pemuatan fail fon, manfaatkan pemalam jQuery-FontSpy . Pemalam ini menilai percanggahan lebar fon antara fon yang diingini dan fon sandaran sewenang-wenangnya. Jika lebar sepadan, fon yang diingini kekal dipunggah; jika tidak, ia telah berjaya dimuatkan.

Pelaksanaan Plugin:

1. Sertakan skrip jQuery-FontSpy:

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

2. Mulakan pemalam pada yang dikehendaki elemen:

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

3. Tentukan gaya untuk memuatkan dan keadaan kegagalan:

.fa-loaded {
  display: block;
}

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

Dengan jQuery-FontSpy, ikon pada mulanya akan disembunyikan. Apabila fon dimuatkan, kelas 'onLoad' digunakan, menyahsembunyikan ikon. Jika fon gagal dimuatkan, kelas 'onFail' digunakan, mengekalkan ikon tersembunyi. Pemalam ini menyediakan kawalan tepat ke atas paparan ikon, memastikan pengalaman pengguna yang optimum walaupun sebelum fon dimuatkan sepenuhnya.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menyembunyikan Ikon Pemegang Tempat Hebat Fon Sehingga Fon Dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!