> 웹 프론트엔드 > CSS 튜토리얼 > 우아한 성능 저하로 스타일이 지정되지 않은 콘텐츠의 플래시를 제거하는 방법은 무엇입니까?

우아한 성능 저하로 스타일이 지정되지 않은 콘텐츠의 플래시를 제거하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-13 05:06:02
원래의
515명이 탐색했습니다.

How to Eliminate Flash of Unstyled Content with Graceful Degradation?

스타일이 없는 콘텐츠의 플래시 제거: 우아한 저하 접근 방식

웹 페이지 요소가 잠깐 나타날 때 스타일이 없는 콘텐츠 플래시(FOUC)가 발생합니다. JavaScript가 해당 스타일을 적용하기 전에 의도한 스타일이 없습니다. 이러한 보기 흉한 효과를 방지하기 위해 JavaScript가 비활성화된 사용자를 위해 기능을 저하시키지 않고 우아하게 성능을 저하시키는 솔루션을 탐색하겠습니다.

CSS가 아닌 JavaScript로 요소 숨기기

처음에는 CSS로 요소를 숨긴 다음 JavaScript로 표시하는 것은 JavaScript가 활성화되지 않은 사용자가 해당 요소를 볼 수 없기 때문에 문제가 됩니다. 더 나은 접근 방식은 요소를 숨기고 표시하는 데 JavaScript를 사용하는 것입니다.

페이지 콘텐츠 숨기기 및 표시를 위한 jQuery

jQuery를 사용하면 페이지 콘텐츠를 효과적으로 숨길 수 있습니다.

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});
로그인 후 복사

HTML로 디스플레이 최적화 숨기기

단, 큰 페이지의 경우 위 코드로 FOUC를 방지할 수는 없습니다. 따라서 헤드에서 JavaScript가 발견되자마자 HTML 요소를 숨길 수 있습니다.

<html>
  <head>
    <style type="text/css">
      .hidden {display:none;}
    </style>
    <script type="text/javascript">
      $('html').addClass('hidden');
      $(window).on('load', function() {
        $('html').removeClass('hidden');
      });  
    </script>
  </head>
  <body>
    <!-- Body Content -->
  </body>
</html>
로그인 후 복사

jQuery addClass() 메소드는 $(window).on('load') 외부에서 호출된다는 점에 유의하세요. 콜백을 사용하여 HTML 요소를 즉시 숨깁니다.

이 접근 방식은 JavaScript가 없는 사용자라도 페이지 콘텐츠가 처음에 숨겨지고 페이지가 완전히 로드되면 표시되도록 하여 우아한 성능 저하를 보장합니다. 활성화되었습니다.

위 내용은 우아한 성능 저하로 스타일이 지정되지 않은 콘텐츠의 플래시를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿