JavaScript - Nascondere un Div all'avvio (caricamento)

Ho un div nella mia pagina php che utilizza jQuery per nasconderlo una volta caricata la pagina. Ma c'è un modo per nasconderlo fin dall'inizio del caricamento?JavaScript - Nascondere un Div all'avvio (caricamento)

Il motivo per cui lo chiedo è perché per un breve secondo, è possibile vedere il div quando la pagina si sta caricando, e poi si nasconde quando la pagina è completamente caricata.

Sembra poco professionale.

Basta chiedersi se c'è un modo per aggirare questo?

Grazie

fonte

2012-04-13 Oliver Jones

Non puoi semplicemente impostare il css del div per 'display: none'? –

Ti suggerisco di passare questo corso: http://www.w3schools.com/css/, prima di inviare qualsiasi domanda su css. – pylover

Ti suggerisco di no. w3schools ha torto tutte le volte che è giusto. – Halcyon

Utilizzare lo stile css per nascondere il div.

#selector { display: none; }

o usarlo come qui di seguito,

CSS:

.hidden { display: none; }

HTML

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

e in jQuery

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

fonte

2012-04-13 21:40:37

Grazie, anche se tutte le risposte qui sono state utili. Questo funziona fantastico. Grazie mille –

Vorrei aggiungere che il div resterà nascosto se javascript è disabilitato. Puoi usare una classe come .no-js (vedi Modernizr) per mostrarlo se è così. Particolarmente utile per animazioni di dissolvenza in apertura, diapositive ecc. Che iniziano quando la pagina è completamente caricata. – LBridge

Puoi anche usare il metodo js 'toggleClass ('hidden')' per cambiare facilmente la sua visibilità. – renatov

Perché non aggiungere "display: none;" all'attributo dello stile div? Ecco tutta la funzione .hide() di JQuery.

fonte

2012-04-13 21:41:18 Moo

Se osservate l'OP vedrete che il div deve essere nascosto prima che jQuery sia caricato. Questo è ciò che sta causando il FOUC. Devi usare la soluzione CSS per assicurarti che il div sia nascosto mentre jQuery si sta caricando. usando .hide() funziona solo dopo aver caricato jQuery. – JimP

@JimpP Penso che Moo rimanga dovresti aggiungerlo direttamente all'elemento in questo modo

Nascondere l'elemento dall'html sin dall'inizio. jQuery usa questo attributo css nelle sue funzioni hide e show. Penso che questa sia una buona risposta, ma dovrebbe essere più dettagliata. – thinktt

Utilizzando i CSS si può semplicemente impostare display: none per l'elemento in un file CSS o in un attributo style

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



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

o aventi js subito dopo il div potrebbe essere abbastanza veloce anche, ma non pulite

fonte

2012-04-13 21:41:32 GillesC

Esclusione della soluzione CSS. Il modo più rapido è quello di nasconderlo immediatamente con uno script.

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

In questo caso, consiglierei la soluzione CSS di Vega. Ma se hai bisogno di qualcosa di più complesso (come un'animazione) puoi usare questo approccio.

Questo ha alcune complicazioni (vedere i commenti di seguito). Se si desidera che questa parte di script venga eseguita il più velocemente possibile, non è possibile utilizzare jQuery, utilizzare solo JS nativo e rinviare il caricamento di tutti gli altri script.

fonte

2012-04-13 21:42:41 Halcyon

I tag 'script' in linea creeranno solo più problemi al tuo file HTML. –

Ha bisogno della velocità assoluta, questo obiettivo giustifica un po 'di HTML disordinato. Sii pragmatico, sappi quando rompere con lo standard. – Halcyon

Ma non penso che jQuery abbia già caricato in ... '$ (" hideme "). Hide();' potrebbe darti un 'ReferenceError' ... –

Ho avuto lo stesso problema.

Utilizzare i CSS per nascondere non è la soluzione migliore, perché a volte si desidera che gli utenti senza JS possano vedere il div .. La soluzione più pulita è nascondere il div con JQuery. Ma il div è visibile a circa 0,5 secondi, il che è problematico se il div è in cima alla pagina.

In questi casi, utilizzo una soluzione intermedia, senza JQuery. Questo funziona ed è immediata:

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

Naturalmente, è ancora possibile aggiungere tutti gli effetti desiderati sul div, JQuery ginocchiera(), per esempio. E si otterrà il miglior comportamento possibile (imho):

per gli utenti non JS, il div è visibile direttamente
per gli utenti JS, il div è nascosto e ha alternare effetto.

fonte

2013-10-01 09:57:51

Secondo me è la migliore risposta. Anche se, preferirei usare la classe .no-js fornita da Modernizr per un approccio meno disordinato. – LBridge

C'è un modo per farlo senza document.write? – Pacerier

Questo metodo ho usato molto, non so se è un ottimo modo ma funziona bene per le mie esigenze.

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

fonte

2017-03-22 15:22:22 John

Perché funziona? Che cambiamenti hai fatto? Le risposte che affrontano la domanda in questo modo aiutano il lettore a comprendere meglio il proprio problema –

JavaScript - Nascondere un Div all'avvio (caricamento)

risposta

Problemi correlati