보다 효과적인 방법으로 FOUC(Flash of Unstyled Content)를 제거하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

보다 효과적인 방법으로 FOUC(Flash of Unstyled Content)를 제거하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-13 17:33:02

원래의

306명이 탐색했습니다.

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

스타일이 지정되지 않은 콘텐츠 플래시 제거

스타일이 지정되지 않은 콘텐츠 플래시(FOUC)는 브라우저가 적용되기 전에 웹 페이지가 잠시 스타일이 지정되지 않은 상태로 나타날 때 발생합니다. CSS 스타일시트. 이 기사에서는 JavaScript를 사용하여 처음에 페이지 요소를 숨겼다가 숨김 해제하여 FOUC를 방지하는 보다 효과적인 접근 방식을 살펴봅니다.

JavaScript로 숨기기 및 숨기기 해제

처음에는 다음을 사용하여 페이지 요소 숨기기 CSS를 적용한 다음 JavaScript로 숨김을 해제하면 JavaScript가 비활성화된 사용자에게 접근성 문제가 발생할 수 있습니다. 더 나은 해결책은 숨기기 및 숨김 해제에 JavaScript를 사용하는 것입니다.

jQuery의 예

jQuery를 사용하는 한 가지 가능한 접근 방식:

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

로그인 후 복사

그러나 , 이 방법은 문서 본문을 숨기기 전에 준비된 상태에 의존하므로 여전히 일부 문제가 발생할 수 있습니다. FOUC.

최적화된 접근 방식: HTML 태그 숨기기

대안 전략은 JavaScript를 사용하여 스크립트가 헤드에서 발견될 때, 심지어 이전에도 즉시 HTML 태그를 숨기는 것입니다. 문서가 준비되었습니다.

<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>

로그인 후 복사

이 예에서는 jQuery addClass() 메서드가 외부에서 호출됩니다. .load() 함수를 사용하면 HTML 태그를 즉시 숨길 수 있습니다.

위 내용은 보다 효과적인 방법으로 FOUC(Flash of Unstyled Content)를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!