jQueryのオンロードフリッカーを目立たないようにするにはどうすればいいですか？

私はjQuery UIタブを使用しています。コンテンツを読み込む際のちらつきを防ぎながら、JavaScriptが無効になっているときにコンテンツが表示されるようにするにはどうすればよいですか？jQueryのオンロードフリッカーを目立たないようにするにはどうすればいいですか？

ドキュメントがロードされたときに本体に.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（後で実行されるjsによる非構造化コンテンツのフラッシュ）を防ぐことができます。

出典

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のオンロードフリッカーを目立たないようにするにはどうすればいいですか？

答えて

関連する問題