페이지가 렌더링 된 후 CSS가 적용됩니다.

Question

페이지가로드되고 몇 초 후에 CSS 효과 나 스타일이 적용되는이 문제가 발생합니다.

 
One 
Two 
Three 

:

내가보고하고 주요 문제는 내가 페이지를 렌더링 http://docs.jquery.com/UI/Tabs#source

을 사용하고있는 JQuery와 탭이다, 탭은이 같은 초 동안 다른 아래 하나를 보여 탭으로 올바르게 렌더링하십시오.

이 문제를 신속하게 해결할 수 있습니까? 감사합니다.

Answer 1

스타일링이 아닙니다. 그것은 jQuery UI 자바 스크립트 라이브러리입니다.이 라이브러리는 페이지에 필요한 HTML을 추가하여 탭이 모두 비슷하게 보이도록 만듭니다.

몇 가지 옵션이 있습니다. 첫째, jQuery UI가 마술을 완성하면 탭을 숨기고 표시 할 수 있습니다. 둘째, 탭의 스타일을 지정하여 변경 사항이 눈에 띄지 않도록 완료된 출력물을 충분히 볼 수 있도록 할 수 있습니다. 셋째, jQuery UI를 삭제하고 CSS로 탭 스타일을 지정할 수 있습니다. 모든 유효한 접근 방식, 나는 말하고 싶다.

희망이 도움이됩니다.

편집 : 첫 번째 옵션에 대한

이의이 당신의 탭을 포함하는 사업부이라고 가정 해 봅시다 : 그럼

#tabs { 
    display:none; 
} 

: 스타일 시트에서

<div id="tabs"> 
    ...stuff... 
</div> 

는 #tabs을 숨기 다음과 같이 jQuery UI 호출을 수정하십시오.

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Answer 2

CSS가 Javascript를 통해 적용됩니까? 이 경우 몇 가지 정적 CSS를 추가하여 javascript가 실행되기 전에 요소가 최소한 가로로 정렬되도록하는 정적 CSS를 추가 할 수 있습니다.

브라우저가 CSS없이 렌더링 한 후에 CSS를 적용하기로 결정한 경우에는 할 수있는 일이 많지 않습니다. 그러나 CSS가 천천히로드되어 (외부 파일 인 경우),이 경우 가장 중요한 스타일을 HTML의 CSS 섹션에 직접 추가 할 수 있습니다.

Answer 3

브라우저는 일반적으로 HTML 코드에 표시된대로 파일을로드합니다. CSS 파일에 대한 참조를 먼저 넣어야 최대한 빨리로드됩니다.

CSS를 자바 스크립트를 사용하여 적용하는 경우로드 속도를 빠르게 할 수 없습니다. Javascript 파일을 사용하려면 먼저로드해야합니다.

그 외에도 브라우저 렌더링 작동 방식을 제어 할 방법이 없다고 생각합니다.

Answer 4

weirdlover의 반응은 거의 (jQuery를 1.5.2 사용) 나를 위해 일한,하지만 난 create 이벤트 후크했다 :

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

감사합니다!