웹 페이지에서 스타일이 지정되지 않은 콘텐츠 (FOUC)의 플래시를 어떻게 중지합니까?
답변
FOUC를 피하기 위해 내가 한 일은 다음과 같습니다.
-
본문 섹션을 다음과 같이 설정하십시오.
<body style="visibility: hidden;" onload="js_Load()"> -
js_Load()JavaScript 함수 작성 :document.body.style.visibility='visible';
이 접근 방식을 사용하면 전체 페이지와 CSS 파일이로드 될 때까지 내 웹 페이지의 본문이 숨겨집니다. 모든 것이로드되면 onload 이벤트가 본문을 표시합니다. 따라서 웹 브라우저는 모든 것이 화면에 표시 될 때까지 비어 있습니다.
간단한 해결책이지만 지금까지는 작동하고 있습니다.
답변
CSS 스타일을 사용하여 처음에 일부 페이지 요소를 숨긴 다음 자바 스크립트를 사용하여 페이지로드 후 스타일을 다시 표시되도록 변경하는 경우의 문제는 자바 스크립트를 활성화하지 않은 사람들은 해당 요소를 볼 수 없다는 것입니다. 따라서 우아하게 저하되지 않는 솔루션입니다.
따라서 더 나은 방법은 자바 스크립트를 사용하여 페이지로드 후 해당 요소를 처음에 숨기고 다시 표시하는 것입니다. jQuery를 사용하면 다음과 같이하고 싶을 수 있습니다.
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
그러나 페이지가 많은 요소가있는 매우 큰 경우이 코드는 곧 적용되지 않고 (문서 본문이 곧 준비되지 않음) 여전히 FOUC가 표시 될 수 있습니다. 그러나 문서가 준비되기 전이라도 스크립트가 헤드에서 발견되는 즉시 숨길 수있는 요소가 하나 있습니다. 바로 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');
$(document).ready(function() { // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
$('html').show(); // EDIT: Can also use $('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
jQuery addClass () 메서드는 .ready () (또는 더 나은, .on ( ‘load’)) 메서드의 * outside *라고합니다.
답변
CSS 전용 솔루션 :
<html>
<head>
<style>
html {
display: none;
}
</style>
...
</head>
<body>
...
<link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
</body>
</html>
브라우저가 HTML 파일을 파싱 할 때 :
- 가장 먼저 할 일은 숨기기
<html>입니다. - 마지막으로 할 일은 스타일을로드 한 다음 스타일이 적용된 모든 콘텐츠를 표시하는 것입니다.
JavaScript를 사용하는 솔루션에 비해 이것의 장점은 JavaScript가 비활성화 된 경우에도 사용자가 사용할 수 있다는 것입니다.
참고 : 당신은하는 수 넣어 <link>의 내부 <body>. 나는 그것이 일반적인 관행을 위반하기 때문에 단점이라고 생각합니다. deferfor <link>와 같은 속성 이 있으면 좋을 것 입니다 <script>. 왜냐하면 그것은 우리가 그것을 넣을 수 <head>있고 여전히 우리의 목표를 달성 할 수 있기 때문입니다 .
답변
이것은 나를 위해 일했고 자바 스크립트가 필요하지 않으며 많은 요소와 많은 CSS가있는 페이지에서 훌륭하게 작동합니다.
먼저, 전용 추가 <STYLE>에 대한 설정 <HTML>의 시작에, 예를 들어 당신의 HTML, 상단에 ‘0’가시성 ‘숨겨진’및 불투명도와 태그 <HEAD>, 예를 들어, 요소 를 HTML 추가의 상단에 :
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
그런 다음 마지막 .css 스타일 시트 파일 끝 에서 가시성과 불투명도 스타일을 각각 ‘visible’및 ‘1’로 설정합니다.
html {
visibility: visible;
opacity: 1;
}
‘html’태그에 대한 기존 스타일 블록이 이미있는 경우 전체 ‘html’스타일을 마지막 .css 파일의 끝으로 이동하고 위에서 설명한대로 ‘visibility’및 ‘opacity’태그를 추가합니다.
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
답변
모든 현재 브라우저에서 작동하고 이전 브라우저에서는 아무 작업도 수행하지 않는 jQuery에 의존하지 않는 솔루션은 head 태그에 다음을 포함합니다.
<head>
...
<style type="text/css">
.fouc-fix { display:none; }
</style>
<script type="text/javascript">
try {
var elm=document.getElementsByTagName("html")[0];
var old=elm.class || "";
elm.class=old+" fouc-fix";
document.addEventListener("DOMContentLoaded",function(event) {
elm.class=old;
});
}
catch(thr) {
}
</script>
</head>
@justastudent 덕분에 설정을 시도했지만 elm.style.display="none";최소한 현재 Firefox Quantum에서는 원하는대로 작동하는 것 같습니다. 그래서 여기에 좀 더 간결한 솔루션이 있습니다. 지금까지 제가 찾은 가장 간단한 방법입니다.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
답변
Firefox Quantum에서도 작동하는 또 다른 빠른 수정 <script>은 <head>. 그러나 이것은 페이지 속도 통찰력과 전체로드 시간에 불이익을줍니다.
100 % 성공했습니다. 나는 그것이 작업에서 다른 JS와 함께 위의 솔루션을 사용하는 주된 이유이기도하다고 생각합니다.
<script type="text/javascript">
</script>
답변
아무도 CSS에 대해 이야기하지 않았습니다. @import
그것은 내 CSS 파일에 두 개의 추가 스타일 시트를 직접로드하는 것이 나에게 문제였습니다. @import
간단한 솔루션 : 모든 @import링크를<link />
