FOUC(스타일이 지정되지 않은 콘텐츠의 플래시)를 제거하는 방법은 무엇입니까?

스타일이 지정되지 않은 콘텐츠의 플래시 처리

웹페이지가 로드되는 동안 스타일이 지정되지 않은 콘텐츠가 원치 않게 나타나는 것은 스타일이 지정되지 않은 콘텐츠의 플래시(FOUC)라고 알려진 일반적인 문제입니다. ). 이 간략한 기사에서는 이 문제와 해결책을 다룹니다.

CSS로 페이지 요소를 숨기고 나중에 JavaScript로 표시하는 전통적인 접근 방식에는 문제가 있습니다. 이는 JavaScript가 비활성화된 사용자의 웹사이트 유용성을 손상시킵니다.

이를 극복하려면 페이지 로드 후 요소를 숨기고 표시하는 데 JavaScript를 사용하는 것이 좋습니다. jQuery는 초기 솔루션을 제공하지만 큰 페이지의 경우 FOUC를 피할 만큼 신속하지 않을 수 있습니다.

더 효과적인 기술은 페이지가 렌더링되기 전에 JavaScript로 HTML 태그를 숨겨 스크립트 실행 시 신속하게 숨길 수 있도록 하는 것입니다. :

  
    ...
    <style>
      .hidden { display: none; }
    </style>
    ...
    <script>
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    </script>
  
  
    ...
  

이 접근 방식에서는 jQuery의 addClass() 함수가 .on('load') 메서드 외부에서 호출되어 HTML 태그가 숨겨지도록 합니다. 즉시.

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