2013-04-05 2 views
5

나는 항상 <html> 태그에 .no-js 클래스를 갖는 방법을 사용했다. 그런 다음, 자바 스크립트가 활성화되어 있으면, 태그를 제거하고 js로 바꾼 modernizr을 사용했다. 사용자의 브라우저j를 탐지하기 위해 .no-js 클래스 사용하기

기본적으로 CSS3 모바일 및 데스크톱 탐색 기능을 내장했습니다. js 또는 no-js가있는 경우뿐만 아니라 CSS 전환 등 (modernizr으로 확인)이있는 경우 해당 동작을 변경하는 스타일이 있습니다.

문제는 JavaScript가 js로 클래스를로드하고 변경하기 전에 no-js 버전의 플래시가 발생한다는 것입니다. (기본 클래스는 no-js이기 때문에)

나는이 문제를 해결할 수있는 방법을 찾는다. js 특정 코드를 기본 클래스로 배치 한 다음 접두어 .no-js로 다른 코드를 지정하면 js가 활성화되어 있어도 no-js가 깜박입니다. 내가 바꾸면 똑같은 일을한다.

어쩌면 나는 어리 석다. 그러나 어떤 포인터라도 좋을 것이다.

+0

페이지 로딩이 완료 될 때까지 스크립트 실행이 지연되고 있습니까? 그렇다면 페이지가 렌더링을 완료하기 전에 실행되기를 원합니다. –

+0

아니요, 스크립트는 거의 전적으로 CSS로 만들어져 있습니다. 작은 줄의 jQuery 만 있습니다. – ccdavies

+0

한 줄은 기술적으로 스크립트입니다. 그 한 줄은 어떻게 보이며 페이지에 어디에 있습니까? –

답변

8

폴 아이리쉬는이 문제를 처리 할 때 excellent blog post입니다. 이 게시물의 해결책은 다음과 같습니다.

<!DOCTYPE html> 
<html lang='en' class='no-js'> 
    <head> 
     <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> 
     ... 

키는 브라우저에서 무엇이든지 렌더링되기 전에 클래스 이름을 업데이트했는지 확인하는 것입니다.

+0

링크를 이용해 주셔서 감사합니다. –

5

당신은 <head>의 맨 위에 짧은 스크립트를 추가 할 수 있습니다

<script> 
    document.documentElement.className = 
    document.documentElement.className.replace('no-js', 'js'); 
</script> 

또한 자바 스크립트를 사용할 때 무시됩니다 <noscript> 태그에 대해 잊지 마세요.

관련 문제