JavaScript - Ukryj div przy starcie (ładowanie)

Mam div na mojej stronie php, która używa jQuery, aby ukryć go po załadowaniu strony. Ale czy istnieje sposób, aby ukryć to od samego początku ładowania?JavaScript - Ukryj div przy starcie (ładowanie)

Powód, dla którego pytam, ponieważ przez krótką sekundę, można zobaczyć element div podczas ładowania strony, a następnie ukrywa się po pełnym załadowaniu strony.

Wygląda to nieprofesjonalnie.

Zastanawiasz się, czy istnieje sposób obejścia tego?

Dzięki

Źródło

2012-04-13 Oliver Jones

Nie możesz po prostu ustawić css elementu div na 'display: none'? –

Proponuję, aby przejść ten kurs: http://www.w3schools.com/css/, przed przesłaniem jakiegokolwiek pytania na temat css. – pylover

Sugeruję, że nie. w3schools nie ma racji tak często, jak to jest właściwe. – Halcyon

użyć CSS styl ukryć div.

#selector { display: none; }

lub wykorzystać go jak poniżej,

CSS:

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

i jQuery

$(function() { 
    $('#blah').removeClass('hidden'); 
});

Źródło

2012-04-13 21:40:37

Dzięki, chociaż wszystkie odpowiedzi tutaj były pomocne. Ten działa fantastycznie. Dziękuję wszystkim –

Chciałbym dodać, że div pozostanie ukryty, jeśli javascript jest wyłączony. Możesz użyć klasy takiej jak .no-js (zobacz Modernizr), aby ją wyświetlić, jeśli tak jest. Jest szczególnie przydatny do animacji w trakcie pojawiania się, przesuwania itp., Które rozpoczynają się po pełnym załadowaniu strony. – LBridge

Można również użyć metody js "toggleClass (" hidden ")', aby łatwo przełączać jej widoczność. – renatov

Dlaczego nie dodać "display: none;" do atrybutu stylu div? To właśnie robi cała funkcja .hide() JQuery.

Źródło

2012-04-13 21:41:18 Moo

Jeśli spojrzysz na OP, zobaczysz, że div musi być ukryty przed załadowaniem jQuery. Właśnie to powoduje FOUC. Musisz użyć rozwiązania CSS, aby upewnić się, że element div jest ukryty podczas ładowania jQuery. używanie .hide() działa tylko po załadowaniu jQuery. – JimP

@JimpP Myślę, że Moo pozostaje, powinieneś dodać go bezpośrednio do elementu tak, jak to

Ukrywając element od html od samego początku. jQuery używa tego atrybutu css w jego funkcjach ukrywania i pokazywania. Myślę, że to dobra odpowiedź, ale powinna być bardziej szczegółowa. – thinktt

Za pomocą CSS można po prostu ustawić display: none dla elementu w pliku CSS lub w atrybucie style

#div { display:none; } 
<div id="div"></div> 



<div style="display:none"></div>

lub mające js tuż po div może być wystarczająco szybko też, ale nie tak czysty

Źródło

2012-04-13 21:41:32 GillesC

Blokowanie rozwiązania CSS. Najszybszym sposobem jest natychmiastowe ukrycie go za pomocą skryptu.

<div id="hideme"></div> 
<script type="text/javascript"> 
    $("#hideme").hide(); 
</script>

W tym przypadku polecam rozwiązanie CSS firmy Vega. Ale jeśli potrzebujesz czegoś bardziej złożonego (jak animacja), możesz użyć tego podejścia.

Ma to pewne komplikacje (patrz komentarze poniżej). Jeśli chcesz, aby ten skrypt działał tak szybko, jak to możliwe, nie możesz używać jQuery, używać natywnego JS i opóźniać ładowanie wszystkich innych skryptów.

Źródło

2012-04-13 21:42:41 Halcyon

Tagi 'script' wbudowane powodują tylko większy bałagan w pliku HTML. –

Potrzebuje absolutnej prędkości, cel ten uzasadnia trochę niechlujny HTML. Bądź pragmatyczny, wiedz, kiedy zerwać ze standardem. – Halcyon

Ale nie sądzę, jQuery już załadowany w ... '$ (" hideme "). Hide();' może dać ci 'ReferenceError' ... –

Miałem ten sam problem.

Użyj CSS, aby ukryć, nie jest najlepszym rozwiązaniem, ponieważ czasami chcesz, aby użytkownicy bez JS mogli zobaczyć div .. Najczystszym rozwiązaniem jest ukrycie div za pomocą JQuery. Ale div jest widoczny około 0,5 sekundy, co jest problematyczne, jeśli div znajduje się na górze strony.

W takich przypadkach używam rozwiązania pośredniego, bez JQuery. Ten działa i jest natychmiastowy:

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

Oczywiście, nadal można dodać wszystkie efekty, które mają na div, jQuery przełącznik() na przykład. I dostaniesz najlepsze możliwe zachowanie (IMHO):

dla użytkowników niezarejestrowanych JS, div jest widoczny bezpośrednio
dla użytkowników JS, div jest ukryty i ma włączyć efekt.

Źródło

2013-10-01 09:57:51

Moim zdaniem jest to najlepsza odpowiedź. Chociaż wolałbym raczej korzystać z klasy .no-js dostarczanej przez Modernizr w celu mniej niechlujnego podejścia. – LBridge

Czy jest jakiś sposób to zrobić bez document.write? – Pacerier

Metodę tę często używałem, nie wiem, czy jest to bardzo dobry sposób, ale działa dobrze dla moich potrzeb.

<html> 
<head> 
    <script language="JavaScript"> 
    function setVisibility(id, visibility) { 
    document.getElementById(id).style.display = visibility; 
    } 
    </script> 
</head> 
<body> 
    <div id="HiddenStuff1" style="display:none"> 
    CONTENT TO HIDE 1 
    </div> 
    <div id="HiddenStuff2" style="display:none"> 
    CONTENT TO HIDE 2 
    </div> 
    <div id="HiddenStuff3" style="display:none"> 
    CONTENT TO HIDE 3 
    </div> 
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";> 
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";> 
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";> 
</body> 
</html>

Źródło

2017-03-22 15:22:22 John

Dlaczego to działa? Jakie zmiany wprowadziłeś? Odpowiedzi, które rozwiązują to pytanie w ten sposób, pomagają czytelnikowi lepiej zrozumieć swój problem –

JavaScript - Ukryj div przy starcie (ładowanie)

Odpowiedz

Powiązane problemy