FOUC(스타일이 지정되지 않은 콘텐츠의 플래시)를 제거하는 방법은 무엇입니까?
- 원래의
- 2024-11-22 17:29:14892검색
스타일이 지정되지 않은 콘텐츠의 플래시 처리
웹페이지가 로드되는 동안 스타일이 지정되지 않은 콘텐츠가 원치 않게 나타나는 것은 스타일이 지정되지 않은 콘텐츠의 플래시(FOUC)라고 알려진 일반적인 문제입니다. ). 이 간략한 기사에서는 이 문제와 해결책을 다룹니다.
CSS로 페이지 요소를 숨기고 나중에 JavaScript로 표시하는 전통적인 접근 방식에는 문제가 있습니다. 이는 JavaScript가 비활성화된 사용자의 웹사이트 유용성을 손상시킵니다.
이를 극복하려면 페이지 로드 후 요소를 숨기고 표시하는 데 JavaScript를 사용하는 것이 좋습니다. jQuery는 초기 솔루션을 제공하지만 큰 페이지의 경우 FOUC를 피할 만큼 신속하지 않을 수 있습니다.
더 효과적인 기술은 페이지가 렌더링되기 전에 JavaScript로 HTML 태그를 숨겨 스크립트 실행 시 신속하게 숨길 수 있도록 하는 것입니다. :
<html>
<head>
...
<style>
.hidden { display: none; }
</style>
...
<script>
$('html').addClass('hidden');
$(window).on('load', function () {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
...
</body>
</html>
이 접근 방식에서는 jQuery의 addClass() 함수가 .on('load') 메서드 외부에서 호출되어 HTML 태그가 숨겨지도록 합니다. 즉시.
위 내용은 FOUC(스타일이 지정되지 않은 콘텐츠의 플래시)를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.