如何防止jQuery onload閃爍不顯眼？

我正在使用jQuery UI選項卡。我應該如何防止加載內容的閃爍，同時還要確保JavaScript禁用時內容可見？如何防止jQuery onload閃爍不顯眼？

我已經嘗試添加一個.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

這是我做的。把一類no-js在你的HTML標記，然後把下面的代碼只包含HTML標記之後：

<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 onload閃爍不顯眼？

回答

相關問題