jQuery aşırı yük titreşimini engellenmeden nasıl önlersiniz?

jQuery UI Sekmelerini kullanıyorum. Javascript devre dışı bırakıldığında içeriğin görünür olduğundan emin olarak, içeriğin titremesini nasıl önleyebilirim?jQuery aşırı yük titreşimini engellenmeden nasıl önlersiniz?

Doküman yüklendiğinde gövdeye bir .js sınıfı eklemeyi denedim, ancak sekmeler eklenen sınıfla aynı anda yüklendiğinden hala içeriğin titremesi var.

#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>

kaynak

2012-06-01 Asa Carter

Sadece html etiketinden sonra aşağıdaki kodu koymak ardından html etiketi üzerinde no-js sınıfını koyup:

<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>

Bu yöntem gerekirse size html etikete diğer sınıfları sağlar. Js etkin olmayan sayfalar için stillerinizdeki no-js sınıfını kullanın. örnek

stilleri: Yukarıdaki fikirler için

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

kaynak

2012-06-01 13:07:35

kafanın içinde veya html ve kafa arasında? –

konteyner div önce onun kadar önemli değil. Ama ben html etiketinin hemen ardından koyardım (html ile head arasında) –

Yanıtlarınız için herkese teşekkürler. Bu harika çalışıyor ve html etiketindeki diğer sınıfların da istenmesine izin veriyor. –

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

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

js cihazınızda kullanılamaz olmasa bile bu içerik görecektir. Bu yaklaşım, H5BP + Modernizr tarafından neredeyse aynıdır ve bir kenara göre, JS FOUC'u (js sonra yürütme nedeniyle eğilmemiş içeriği flaş) önleyecektir.

kaynak

2012-06-01 13:02:21 fcalderan

Bunu bilmiyordum. Şimdi deneyeceğim :) –

+1 Gömülü olarak dışarıdan bir kaynak oluşturmayacağından emin olmalısınız. –

Gotcha. Teşekkürler. –

Böyle yapabilirsiniz:

<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>

kaynak

2012-06-01 13:03:30

Sen bu şekilde deneyebilirsiniz:

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

konteyner yüklü olduğuna ve Belge hazır ve ne zaman sekmeler yapılır olarak gizlenmiştir kapsayıcıyı gösterebilirsiniz. Bu benim yaptığım şeydir.

kaynak

2012-06-01 13:07:11 nebulousGirl

sayesinde yük titrer çözmek için. Tarayıcılar en kısa zamanda işaretlemeye çalıştıkça, jquery-ui Tabs gibi bazı (büyük) jquery-ui içerik öğeleri için bu işlemden kaçınılmalıdır.

Bu çözüm benim için çalışıyor:

<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>

kaynak

2015-09-23 08:03:59 rklehm

jQuery aşırı yük titreşimini engellenmeden nasıl önlersiniz?

cevap

İlgili konular