우아한 성능 저하로 스타일이 지정되지 않은 콘텐츠의 플래시를 제거하는 방법은 무엇입니까?
- Susan Sarandon원래의
- 2024-11-13 05:06:02473검색
스타일이 없는 콘텐츠의 플래시 제거: 우아한 저하 접근 방식
웹 페이지 요소가 잠깐 나타날 때 스타일이 없는 콘텐츠 플래시(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!