JQuery UI 대화 상자에서로드되는 웹 페이지가 있습니다. Firefox에서 페이지가로드되면 모든 CSS와 자바 스크립트가 실행되기 전에 잠시 동안 일반 텍스트가 나타납니다. 모든 것이로드되면 텍스트가 제대로 표시됩니다. 모든 CSS/JavaScript가 실행될 때까지 텍스트가 표시되지 않도록 할 수있는 방법이 있습니까? 가시성을 켜고 끄려 고 시도했지만 제대로 작동하지 않았습니다.Firefox에서 페이지가 완전히로드되기 전에 스타일없는 텍스트가 깜박입니다.
이것은 Firefox에서만 발생하며 다른 브라우저에서는 발생하지 않는 것으로 보입니다.
어떤 사람들은 이것을 FOUC (Flash of Unstyled Content)라고 부릅니다. 자바 스크립트 (resource)를 통해 임베드 된 Google 글꼴을 사용하는 경우 태그에 클래스를 추가하면 html.wf-loading #content{display:none}과 같은 일반적인 규칙을 사용하여 스크립트가로드되는 동안 콘텐츠를 숨길 수 있습니다.
그러나 내 경험상 이것은 폭탄이 아닙니다. 내가 일관되게 FUOC를 얻지 못하는 유일한 방법은 글꼴을 BASE64로 변환하고 CSS (Font Squirrel provide a great resource for doing this)에 직접 포함시키는 것입니다. 이렇게하면 글꼴이 노출되기 전에 CSS가로드되기 전에 글꼴이 대기합니다.
요소를 숨기는 클래스를 만듭니다. 처음에 숨기려는 요소에 해당 클래스를 추가하십시오. 당신이 원하는 자바 스크립트를 실행 한 후에 클래스를 제거하십시오. 다음과 같은 것이 도움이 될 것입니다.
.js-needed
{
display: none;
}
//Add this line after you've run the code you want executed
$(".js-needed").each(function() { $(this).removeClass(".js-needed"); });
<div class="js-needed">Stuff to hide initially</div>
css, js 또는 외부 링크가 포함되어 있습니까? 외부로 연결하면 클라이언트 브라우저에서 스타일 및 js를 캐시하는 데 도움이됩니다. – Chief
http://stackoverflow.com/a/9823468/888177 – Stefan