jquery ui 탭이 모두 htm이 렌더링 된 후에로드됩니다.

Question

메신저 jquery UI를 사용합니다.

가끔 내 페이지가로드 될 때마다 각 탭의 모든 html이 페이지에 표시되고 탭이 나타나고 html이 탭 내에 위치하기까지 약간의 시간이 걸립니다. UI의 관점에서 볼 때이 초기 깜박임은 매우 짜증 스럽습니다. 그것을 극복 할 수있는 방법이 있습니까?

Answer 1

html이 렌더링되기를 기다리고 있습니다. $(document).ready()을 사용하는 이유입니다.

당신이 할 수있는 것은 당신이) (

<script>$('#tab').tab()</script> // 또는 .tabs을 넣어해야 그것은 당신에게, 즉석에서 jQuery를 마음을 그것을 할 것이다 다음

을 기억 CNT 탭 섹션 (HTML)을 받고있다 코어 파일은 헤드 섹션에 있어야합니다 :)

Answer 2

하나의 좋지 않은 접근법은 모든 ui 렌더링이 완료 될 때까지 페이지의 모든 것을 숨기기 위해 z- 인덱스를 사용하여 100 % 높이와 너비 오버레이를 설정하는 것입니다.

Answer 3

jQuery를 삽입하는 올바른 방법은 모든 페이지로드가 완료되면

$(document).ready(function(){ 
    ... 
} 

jQuery를이 실행됩니다 사용이 때문입니다. 이것은 100 % 의도 된 것입니다. 당신이 사용할 수있는

한 트릭, 그리고 여전히 jQuery를하지만 함수 외부 $ (문서) .ready (함수() { ... }

// Class indicating that JS is enabled                                   
$('html').addClass('js'); 

를 사용하여 일부 JS를 추가하는 것입니다, 당신이 깜박하고 싶지 않은 것들 옆에 가장 가까운 CSS 클래스를 얻을 물론,

/** 
* For anything you want to hide on page load when JS is enabled, so 
* that you can use the JS to control visibility and avoid flicker.                                   
*/ 
html.js .myClass { 
    display: none; 
} 

그리고 일부 CSS를 추가, 당신은 표시, 일부 JS와 .myClass의 가시성을 처리해야합니다 우리가 정의한 것에 반하여 CSS 규칙.

이것은 display: none 번 깜박임이 깜박임을 볼 수 없을 정도로 빠릅니다.

Answer 4

두 번째 탭 (처음에는 나타나지 않는 사용자)의 z- 색인 속성을 수정하고 콜백에서 원래 값을 다시 되돌릴 수 있습니다.

Answer 5

같은 문제가있었습니다.
"display : none;"탭을 선언했습니다. 내 CSS에.
jQuery.tab()이 올바르게 실행되면 실행됩니다.