Sayfa yüklenmeden önce HTML elemanını nasıl gizlerim

Bir div görüntüleyen veya gizleyen bir JQuery kodum var.Sayfa yüklenmeden önce HTML elemanını nasıl gizlerim

$("div#extraControls").show(); // OR .hide()

Başlangıçta bu yüzden kullanılan div görünmez olmak istiyorum:

$(document).ready(function() { 
    $("div#extraControls").hide(); 
});

Ancak tarayıcı üzerinde bir saniye görünür içerik yükleri ne istiyorum olmadığı, yok olmadan önce.

Sayfa yüklenmeden önce öğeyi gizlemek için bir komut dosyası ile dinamik olarak gizlemeyi gösterme özelliğini korurken nasıl ayarlayabilirim? BB'de

kaynak

2010-06-01 Robert

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

$(document).ready(function() { 
    $("div#extraControls").removeClass("hidden"); 
});

kaynak

2010-06-01 15:33:09

+1 biri Senin durumunda

$(window).bind("load", function() { // code here });

olduğu kullanıcı JavaScript devre dışı bırakmışsa tarayıcıda, tüm sayfa gizli kalır. –

Deneyimlerimden bazı tarayıcılar, "display: none" veya "opacity: 0" kullanılarak gizlenen öğelere medya (örneğin, görüntüler) yüklemeyecektir. Bunun yerine "görünürlük: gizli" kullanılmasını öneririm. – mqchen

@ mq.chen Uyarı için teşekkürler, ancak görünürlük etiketi içeriğin .hide() komutuyla değiştirilmesine izin vermiyor. – Robert

<div id="extraControls" style="display: none;"></div>

kaynak

2010-06-01 15:32:39 Caleb

Ne yapabilirdi div sonra dokümanın sonunda bir inline script etiketi eklemek, ya da hemen:

#extraControls { display: none; }

Veya HTML

id "extraControls" ile. Ateş biraz daha erken olmalı. siz de bu sunucu tarafında yapabilirdi, ama belki bunu yapmak istemiyoruz iyi bir sebebi var elbette

<div id="extraControls">i want to be invisible!</div> 
<script type="text/javascript">$("div#extraControls").hide()</script>

(tarayıcı javascript DESTEKLEMİYORSA gibi kontroller görünür var).

kaynak

2010-06-01 15:33:56 CharlesLeaf

.hidden { 
display: none; 
}

sayfayı yüklerken görünür olmasını istemediğiniz elemana bu ekle bir css sınıfı olun. Ardından tekrar görüntülemek için $("div#extraControls").show(); kullanın.

kaynak

2010-06-01 15:37:49 OMGKurtNilsen

#toggleMe //Keep this in your .css file 
{ 
display:none; 
visibility:inherit; 
background-color:#d2d8c9;  
} 


<a href="#" onclick="return false;">Expand Me</a> 
///this way u can make a link to act like a button too 

<div id="toggleMe"> //this will be hidden during the page load 
    //your elements 
</div> 

///if you decide to make it display on a click, follow below: 
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project 
<script type="text/javascript"> 
$(document).ready(function() { 
     $("a").click(function() { 
      $('#toggleMe').toggle("slow"); //Animation effect 
     }); 
    }); 
</script> 

///Now for every alternate click, it shows and hides, but during page load; its hidden. 
//Hope this helps you guys ...

kaynak

2011-04-11 01:48:15 Ravi

CSS3 ile aslında :only-child seçicinin yararlanarak bir sayfa yüklendikten kadar içeriği gizleyebilirsiniz.

Here is a demonstration of how to do this. Temel fikir, yükleme sırasında CSS'nin bu düğümü ve alt düğümlerini yüklerken DOM'a tek bir düğüm ekleyeceğidir. Ayrıca, verilen ana düğüme ikinci bir çocuk eklendiğinde, :only-child seçme kuralı bozulur. Bu seçiciyle eşleşiyor ve verilen düğümü gizlemek için display: none'u ayarlıyoruz.

<!doctype html> 

<html> 

    <head> 
    <title>Hide content until loaded with CSS</title> 
    <style type="text/css" media="screen"> 
     .hide-single-child > :only-child { 
     display: none; 
     } 
    </style> 
    </head> 

    <body> 
    <div class='hide-single-child'> 
     <div> 
     <h1>Content Hidden</h1> 
     <script> 
      alert('Note that content is hidden until you click "Ok".'); 
     </script> 
     </div> 
     <div></div> 
    </div> 
    </body> 

</html>

kaynak

2013-12-25 12:58:32

yüklenen sayfa üzerinde javascript fonksiyonu yüklemek için en iyi yolu, bir şey nota

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

$(window).bind("load", function() { 
    $("div#extraControls").removeClass("hidden"); 
});

kaynak

2017-09-14 14:00:34 drafiko

Sayfa yüklenmeden önce HTML elemanını nasıl gizlerim

cevap

İlgili konular