jQuery onload flicker가 눈에 띄지 않게 방지하려면 어떻게해야합니까?

jQuery UI 탭을 사용하고 있습니다. 콘텐츠를로드 할 때 깜박임을 방지하면서 자바 스크립트가 비활성화되었을 때 콘텐츠가 표시되도록하려면 어떻게해야합니까?jQuery onload flicker가 눈에 띄지 않게 방지하려면 어떻게해야합니까?

문서가로드 될 때 본문에 .js 클래스를 추가하려고했지만 추가되는 클래스와 동시에 탭이로드 될 때 콘텐츠의 깜박임이 계속 발생합니다.

#container{display:none;} 

<div id="container"> 
    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2</p> 
    </div> 
    </div> 
</div> 
<script> 
$(document).ready(function(){ 
    $('#tabs').tabs(); 
    $('#container').show(); 
}); 
</script>

출처

2012-06-01 Asa Carter

이것은 내가하는 일입니다. 단지 html 태그 뒤에 다음 코드를 넣어 다음 HTML 태그에 no-js의 클래스를 넣어 :

<script> 
    // Sets 'js' on html element and removes 'no-js' if present (here to prevent flashing) 
    (function(){ 
     document.documentElement.className = document.documentElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + (' js '); 
    })(); 
</script>

이 방법은 필요한 경우 당신은 당신의 html 태그에 다른 수업을 할 수 있습니다. js가 활성화되지 않은 페이지의 경우 스타일에 no-js 클래스를 사용하십시오. 예를

스타일 : 위의 아이디어를

#container { 
    display:none; 
} 
.no-js #container 
{ 
    display: block; 
}

출처

2012-06-01 13:07:35

머리 안쪽이나 html과 머리 사이? –

컨테이너 div 전에는 중요하지 않습니다. 하지만 html 태그 (html과 head 사이) 바로 뒤에 넣을 것입니다. –

답장을 보내 주셔서 감사합니다. 이것은 훌륭하게 작동하며 html 태그의 다른 클래스가 필요할 경우이를 허용합니다. –

<html class="nojs"> 
    ... 
    <head> 
    <script> 
     document.documentElement.className = "js"; 
    </script> 
    </head> 

    ... 
    <style> 
    #container {display:none;} 
    .nojs #container { display: block;} 
    </style>

JS 귀하의 장치에 사용할 수없는 경우에도이 콘텐츠를 볼 수있게됩니다. 이 접근법은 H5BP + Modernizr에서 거의 동일하게 수행되며, JS FOUC (추후 실행으로 인해 스타일이없는 컨텐츠의 플래시)가 방지됩니다.

출처

2012-06-01 13:02:21 fcalderan

내가 알고하지 않았다. 이제 시도해 보겠습니다 :) –

+1 외부 리소스가 다시 FOUC로 끝나기 때문에 링크하지 말고 퍼가는 것을 확인하십시오. –

Gotcha. 감사. –

당신은 이런 식으로 작업을 수행 할 수 있습니다

<div id="container"> 
    <div id="tabs"> 
    <script>$('#tabs').addClass('js');</script><!-- added this line --> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2</p> 
    </div> 
    </div> 
</div> 
<script> 
$(document).ready(function(){ 
    $('#tabs').tabs().show(); // changed this line 
    $('#container').show(); 
}); 
</script>

출처

2012-06-01 13:03:30

당신이이 방법을 시도 할 수 :

<script> 
$("#container").hide(); 
$(document).ready(function(){ 
    $('#tabs').tabs(); 
    $('#container').show(); 
}); 
</script>

컨테이너는이로드되고 문서가 준비 때 탭 완료로 숨겨져 컨테이너를 보여줄 수 있습니다.

출처

2012-06-01 13:07:11 nebulousGirl

덕분에 부하 플리커에를 해결합니다. 브라우저가 가능한 한 빨리 마크 업을 렌더링하려고하므로 jquery-ui 탭과 같은 일부 (거대한) jquery-ui 콘텐츠 요소는 피해야합니다.

이 솔루션은 나를 위해 작동 :

<html> 
... 
    <head> 
    ... 
    <script> 
     $(document).ready(function() { 
     $("#tabs_container").tabs(); 

     // force *initialized* #tab_container to be displayed 
     $("#tabs_container").show(); 
     }); 
    </script> 
    </head> 
    ... 

    <body> 
    ... 
    <!-- avoid unstyled tabs to be displayed using "display: none" at markup --> 
    <div id="tabs_container" style="display: none;"> 
     <!-- (huge) tabs content --> 
    </div> 
    ... 
    </body> 
</html>

출처

2015-09-23 08:03:59 rklehm

jQuery onload flicker가 눈에 띄지 않게 방지하려면 어떻게해야합니까?

답변

관련 문제