Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC) dengan Cara yang Lebih Berkesan?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-11-13 17:33:02

asal

199 orang telah melayarinya

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();
    });
});

Salin selepas log masuk

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>

Salin selepas log masuk

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!