cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC) dengan Cara yang Lebih Berkesan?

Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC) dengan Cara yang Lebih Berkesan?

Linda Hamilton
Linda Hamiltonasal
2024-11-13 17:33:02199semak imbas

How to Eliminate Flash of Unstyled Content (FOUC) in a More Effective Way?

Menghapuskan Denyar Kandungan Tidak Digayakan

Denyar kandungan tidak digayakan (FOUC) berlaku apabila halaman web muncul secara ringkas tanpa gaya sebelum penyemak imbas boleh digunakan lembaran gaya CSS. Artikel ini meneroka pendekatan yang lebih berkesan untuk menghalang FOUC, menggunakan JavaScript untuk menyembunyikan pada mulanya dan kemudian menyahsembunyikan elemen halaman:

Menyembunyikan dan Menyahsembunyi dengan JavaScript

Pada mulanya menyembunyikan elemen halaman dengan CSS dan kemudian menyahsembunyikannya dengan JavaScript boleh membawa kepada isu kebolehaksesan untuk pengguna dengan JavaScript dilumpuhkan. Penyelesaian yang lebih baik ialah menggunakan JavaScript untuk menyembunyikan dan menyahsembunyi.

Contoh dengan jQuery

Satu pendekatan yang mungkin menggunakan jQuery:

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});

Walau bagaimanapun , kaedah ini bergantung pada badan dokumen sedia sebelum menyembunyikannya, yang mungkin masih membawa kepada beberapa FOUC.

Pendekatan Dioptimumkan: Menyembunyikan Tag HTML

Strategi alternatif adalah menggunakan JavaScript untuk menyembunyikan teg HTML serta-merta apabila skrip ditemui di kepala, walaupun sebelum dokumen itu sedia:

<html>
  <head>
    <!-- Other stuff like title and meta tags go here -->
    <style type="text/css">
      .hidden {display:none;}
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').show();
      });  
    </script>
  </head>
  <body>
    <!-- Body Content -->
  </body>
</html>

Dalam contoh ini, kaedah addClass() jQuery dipanggil di luar . fungsi load() untuk menyembunyikan teg HTML serta-merta.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC) dengan Cara yang Lebih Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css html for using function this
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Mencipta Pautan daripada Sel Jadual HTML Keseluruhan?Artikel seterusnya：Bagaimana untuk Mencipta Pautan daripada Sel Jadual HTML Keseluruhan?

Artikel berkaitan

Lihat lagi