웹 페이지에서 스타일이 지정되지 않은 콘텐츠 (FOUC)의 플래시를 어떻게 중지합니까?
답변:
FOUC를 피하기 위해 내가 한 일은 다음과 같습니다.
본문 섹션을 다음과 같이 설정하십시오. <body style="visibility: hidden;" onload="js_Load()">
js_Load()JavaScript 함수 작성 :document.body.style.visibility='visible';
이 접근 방식을 사용하면 전체 페이지와 CSS 파일이로드 될 때까지 내 웹 페이지의 본문이 숨겨집니다. 모든 것이로드되면 onload 이벤트가 본문을 표시합니다. 따라서 웹 브라우저는 모든 것이 화면에 표시 될 때까지 비어 있습니다.
간단한 해결책이지만 지금까지는 작동하고 있습니다.
<noscript><style>body { visibility: visible; }</style></noscript>사이트가 JS가 비활성화 된 상태에서도 작동하도록 마지막에 추가해야합니다 .
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 *라고합니다.
$('html').show()'과를 $('html').removeClass('hidden');. 이렇게하면 준비 기능이 addClass.
removeClass는 show(원래 답변에서와 같이 ) 대신 ( 내가 제안한대로) 사용하여 수행해야합니다. 그렇지 않으면 html이 표시되지 않습니다. jQuery의 show ()는 이제 스타일링을 방해하지 않도록 CSS 스타일링에서 모든 표시 상태를 명시 적으로 찾고 복원한다고 생각합니다. 따라서 실제로 '숨겨진'클래스를 제거해야합니다.
<style>html { display: none; }</style>에 <head>바로 그 전에, 그리고 당신의 진짜 스타일 </body>?
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>있고 여전히 우리의 목표를 달성 할 수 있기 때문입니다 .
display: none배경 이미지 나 색상도 숨겨지는 것을 아는 것이 유용합니다 . 내 웹 사이트에는 어두운 테마가 있으므로 흰색으로 깜박입니다. visibility: hidden내 경우에는 사용 이 더 좋았습니다.
<head>가 <body>. (정말 긴 페이지를 가지고 있다면 브라우저는 페이지의 끝이로드되기 전에 페이지를 표시하기 시작할 수 있습니다. 그러나 이것은 실제로 내 사이트가 데이터베이스에서 큰 테이블을로드하기 때문에 선호하는 동작입니다). JavaScript가 필요하지 않은 간단한 솔루션을 선호합니다!
이것은 나를 위해 일했고 자바 스크립트가 필요하지 않으며 많은 요소와 많은 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
html{display:none;}하려면 head및 html{display:block;}스타일 시트에서 를 사용해야 합니다. (저는에 어두운 배경이 설정된 문제를 경험 한 적이 없습니다 body.)
모든 현재 브라우저에서 작동하고 이전 브라우저에서는 아무 작업도 수행하지 않는 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>
elm.style.display = 'none';그런 다음 취소 하지 elm.style.removeProperty('display');않습니까?
아무도 CSS에 대해 이야기하지 않았습니다. @import
그것은 내 CSS 파일에 두 개의 추가 스타일 시트를 직접로드하는 것이 나에게 문제였습니다. @import
간단한 솔루션 : 모든 @import링크를<link />
@import동기가 되기를 바랍니다 .
여기 내 코드입니다 .. 문제가 해결되기를 바랍니다
set <body style="opacity:0;">
<script>
$(document).ready(function() {
$("body").css('opacity', 1);
});
</script>
<body style="opacity:0;">
지금까지 찾은 최고의 솔루션은 다음과 같습니다.
헤더의 모든 스타일을 <style/>태그에 추가<head/>
스타일 태그 상단에 추가 .not-visible-first{visibility: hidden}+ 기타 헤더 스타일
본문 끝에 JS를 통해 CSS 추가
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");
그리고 .not-visible-first{visibility: visible}끝에 추가 하는 것을 잊지 마십시오main.min.css
이 옵션은 더 나은 사용자 경험을 제공합니다
내가 아는 가장 간단한 방법은 html 태그를 숨긴 다음 javascript 파일 하단에서 html 태그를 페이드 인하는 것입니다.
HTML
<html style="display:none;">
...
</html>
자바 스크립트
/*
* FOUC Fix - Flash of Unstyled Content
* By default, the <html> tag is hidden to prevent the flash of unstyled content.
* This simple fadeIn() function will allow the page to gracefully fade in once
* all assets are loaded. This line of code must remain at the bottom of the js
* assets.
*/
$( 'html' ).fadeIn();
출처 : https://gist.github.com/marchershey/139db0e8fd6f03a83578698409d333ce
fadeIn()JQuery와 방법이 아닌 기본 자바 스크립트입니다.