이전에 jQuery 스타일을 어떻게 만들 수 있습니까?

Question

나는 내 웹 페이지에서 다음 HTML이 : 페이지가로드되면

<input id="htmlEdit" type="checkbox"/> 

을 다음과 같이 체크 박스 wijmo 사용하여 스타일을 가져옵니다

$(document).ready(function() { 
     var store = window.localStorage; 
     $('#htmlEdit').wijcheckbox(); 

이 작동하지만이 점에서 문제가있다 페이지 이 보이고 요소가 스타일링되는 사이에 1 ~ 2 초의 지연이 있습니다. 그 지연 동안 나는 옛날 스타일의 체크 박스를 본다.

누구든지이 지연을 줄이기 위해 무엇을 할 수 있습니까? 예를 들어, wijcheckbox() 함수가 더 일찍 발동되도록 할 수 있습니까? 문서를 #htmlEdit으로 바꾸려고했지만 이 작동하지 않았습니다.

Answer 1

자바 스크립트를 통해 DOM 요소에 액세스하려면 브라우저에서 DOM 요소를 이미 파싱해야하고 브라우저에서 파싱 한 후에는 DOM 요소가 이미 브라우저에 의해 파싱 된 상태 여야합니다. 눈에 보인다.

가장 좋은 대답은 CSS 스타일을 통해 초기 모양을 제어하는 ​​것입니다. 그 이유는 항목이 구문 분석 될 때 강제로 적용되고 첫 번째 표시에는 CSS 스타일이 통합되기 때문입니다. 이 많은 작업을 수행해야하는 경우

<input id="htmlEdit" type="checkbox"/> 
<script type="text/javascript> 
$('#htmlEdit').wijcheckbox(); 
</script> 

그러나이 빠르게 지저분 : 주어진 객체에서 자바 스크립트를 실행할 수 있습니다

가장 빠른 방법은 HTML 소스의 요소 직후 인라인 자바 스크립트를 넣어하는 것입니다 일반적으로 마크 업과 JS를 흩어 놓는 것은 좋지 않습니다.

CSS로 스타일을 지정할 수 없다면 처음에는 숨겨져있는 객체를 숨긴 다음 JS에 의해 스타일이 지정된 후에 만 ​​표시하는 것이 좋습니다.

<input id="htmlEdit" type="checkbox" style="visibility: hidden" /> 

그리고 당신이 적절하게 스타일을 한 후, 다음 JS에는 표시 :

$(document).ready(function() { 
    $('#htmlEdit').wijcheckbox().css("visibility", "visible"); 
}) 

참고 : 페이지가 제대로 레이아웃 때문에 내가 display: none 대신 여기 visibility: hidden을 사용 확인란 페이지가 눈에 띄게되면 페이지가 크게 재촉되지 않으므로 주변에서 점프 할 수 있습니다. 이것은 체크 박스가없는 레이아웃을보고, 체크 박스가 보이면 위치 변경을 보는 것이 바람직합니다. 새로운 체크 박스 스타일이 극적으로 다르다면 새로운 스타일을 추가 할 때 조금씩 바뀔 수 있지만 가시성을 사용할 때는 크게 달라지지는 않습니다.

<input class="styledCheckbox" id="htmlEdit" type="checkbox"> 

CSS :

/* initially hidden until wij style is applied */ 
.styledCheckbox {visibility: hidden;} 

자바 스크립트 :

$(document).ready(function() { 
    // add style to all checkboxes and make them visible 
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible"); 
}) 

Answer 2

이 문서 로딩 시간을 줄이기 위해 할 수있는 아무것도 없지만 당신이 시도 할 수 :

CSS :

#htmlEdit { 
    display: none; 
} 

자바 스크립트 :

$(document).ready(function() { 
    var store = window.localStorage; 
    $('#htmlEdit').wijcheckbox(); 
    $('#htmlEdit').show(); 
}); 
​ 

그 가죽을 그것이 적절하게 스타일 될 때까지 요소.