ondomready JavaScript 지원에 대한 대체 솔루션

페이지가 완전히로드되기 전에 DOM을 사용하여 작업 할 수있는 JavaScript 프레임 워크가 많이 있습니다. html 또는 body 태그가 사용자 에이전트에 JavaScript 지원 여부를 결정하는 방식으로 조작되는 경우가 종종 있습니다.ondomready JavaScript 지원에 대한 대체 솔루션

예를 들어 html 태그의 클래스는 'no-js'이고 DOM이 준비되면 해당 클래스 이름이 'js'로 업데이트되므로 프런트 엔드 개발자는 페이지의 스타일을 지정할 수 있습니다. 두 가지 방법 - 하나는 자바 스크립트를 지원하고 다른 하나는 자바 스크립트가 지원되지 않을 때 데이터를 올바르게 표시하는 방식입니다.

이 기능은 정상적으로 작동하지만 항상 약간의 지연이 있으며 업데이트 된 클래스 이름 지정 기능이 ('no-js'에서 'js'로) 실행될 때 화면이 자주 표시됩니다. JS 지원 버전의 사이트에 다르게 스타일이 적용되었습니다.

이것은 항상 저를 괴롭 히며, 페이지에 많은 JavaScript 기반 상호 작용이 있으면 실제로보기 흉하게 보일 수 있습니다.

간단히 말해서, 나의 의도는 ondomready 이벤트보다 더 빨리 수행 할 수있는 해결책을 찾는 것이 었습니다. 내가 생각해 낸 해결책은 오프닝 본문 태그 바로 뒤에 다음 문을 실행하는 것이 었습니다.

<script type="text/javascript">//<![CDATA[ 
var elBody = document.getElementsByTagName('body')[0]; 
elBody.className = elBody.className.replace(new RegExp('no-js\\b'), 'js');//]]></script>

이 방법이 효과가있는 것으로 보입니다. 더 이상 화면이 뛰지 않습니다. 이것은 좋은 접근 방법입니까? 내가 모르고있는 모든 죄수?

출처

2011-02-10 Mike

나는 또한 <body> 태그를 여는 즉시 가능한 한 빨리 스크립트를 실행한다. 나는 한 가지 제안 만하고있다. 이 작은 스크립트는 정규식의 필요성을 피하면 더 빨리 실행될 수 있습니다. 아마도 이런 일을 단순화 :

<body> 
<script type="text/javascript">document.getElementsByTagName('body')[0].className='js';</script>

은 그럼 당신은 기본적으로 자바 스크립트가 아닌 상황의 페이지 스타일을하고 js 클래스를 사용하여 향상시킬 수 있습니다. 예를 들어 : 선택기 #signin-form이 .no-js #signin-form보다 빠르게 실행하기 때문에

는

/* Base styles for signin form, displayed inline on page */ 
#signin-form{ 
background: #fff; 
color: #333; 
/* ...other pretty form styles... */ 
} 

/* JS enhanced floating signin form */ 
.js #signin-form{ 
display: none;/* removes form from DOM and shown by JavaScript */ 
position: absolute; 
top: 0; 
right: 1em; 
}

, 여기 또한 CSS 렌더링 장점이있다.

희망이 도움이됩니다.

출처

2011-03-24 11:43:54 dotjay

ondomready JavaScript 지원에 대한 대체 솔루션

답변

관련 문제