스타일이 지정되지 않은 콘텐츠의 플래시 제거
웹 페이지에서 스타일이 지정되지 않은 콘텐츠 (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>있고 여전히 우리의 목표를 달성 할 수 있기 때문입니다 .
모든 현재 브라우저에서 작동하고 이전 브라우저에서는 아무 작업도 수행하지 않는 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>
Thanks to @justastudent, I tried just setting elm.style.display="none"; and it appears to work as desired, at least in current Firefox Quantum. So here is a more compact solution, being, so far, the simplest thing I've found that works.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
This is the one that has worked for me and does not require javascript and it works great for pages with many elements and lots of css:
First, add a dedicated <STYLE> setting for the <HTML> tag with visibility 'hidden' and opacity as '0' at the top of your HTML, e.g, in the beginning of the <HEAD> element, for example, at the top of your HTML add:
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:
html {
visibility: visible;
opacity: 1;
}
If you already have an existing style block for the 'html' tag, then move the entire 'html' style to the end of the last .css file and add the 'visibility' and 'opacity' tags as described above.
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
An other quick fix which also works in Firefox Quantum is an empty <script> tag in the <head>. This however, penalizes your pagespeed insights and overall load time.
I had 100% success with it. I think it's also the main reason, why above solutions with other JS in the works.
<script type="text/javascript">
</script>
No one has talked about CSS @import
That was the problem for me i was loading two extra style sheets directly in my css file with @import
Simple solution: Replace all @import links with <link />
I came up with a way that requires no real code change whatsoever, woohoo! My issue was related to importing several css files AFTER some javascript files.
To resolve the issue I just moved my CSS links so that they would be above my javascript imports. This allowed all my CSS to be imported and ready to go ASAP, so that when the HTML appears on the screen, even if the JS isn't ready, the page will be properly formatted
Here is my code .. hope it solve your problem
set <body style="opacity:0; >
<script>
$(document).ready(function() {
$("body").css('opacity', 1);
});
</script>
The best solution I found till now is like this:
Add all styles of your header to a
<style/>tag in<head/>at the top of style tag add
.not-visible-first{visibility: hidden}+ other header styleAdd css via JS at the end of body
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");And remember to add
.not-visible-first{visibility: visible}to the end ofmain.min.css
This option will create better user experience
참고URL : https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content
'Programing' 카테고리의 다른 글
| jQuery를 사용하여 프로그래밍 방식으로 링크 클릭을 트리거하는 방법은 무엇입니까? (0) | 2020.11.14 |
|---|---|
| XAML의 * .resx 파일에서 값 가져 오기 (0) | 2020.11.14 |
| int를 4 바이트 문자 배열로 변환 (C) (0) | 2020.11.14 |
| C ++ 열거 형은 정수보다 사용 속도가 느립니까? (0) | 2020.11.14 |
| Java에서 enum의 서수를 지정할 수 있습니까? (0) | 2020.11.14 |