Finestra di dialogo JQuery momentaneamente visualizzata al caricamento della pagina

Question

Ho creato una pagina che ha una finestra di dialogo basata su JQuery che utilizza la funzione dell'interfaccia utente JQuery standard. Lo faccio con le funzionalità out of the box di JQuery ... niente di speciale. Ecco il mio HTML per la finestra di dialogo:

<div id = "myDialog"> 
    <!-- ... more html in here for the dialog --> 
</div> 

Poi il JQuery chiamato in javascript che trasforma il <div> a una finestra di dialogo:

// pruned .js as an example of kicking up a JQuery dialog 
    $('#myDialog').dialog({ 
     autoOpen: false, 
     title: 'Title here', 
     modal: true 
     } 
    }); 

Anche in questo caso, plain-vanilla JQuery. Quindi si avvia questa procedura guidata facendo clic su un collegamento nella pagina padre e quindi si genera una finestra di dialogo JQuery che ha una parte significativa di HTML che include immagini, ecc.

Come ho continuato a sviluppare questa pagina, ho iniziato a notare che quando ho caricato la pagina nel browser che i tag div < si inserivano in trasformazioni di JQuery in finestre di dialogo verrebbero visualizzati brevemente. Quindi la pagina funzionerebbe come previsto. In altre parole, la finestra di dialogo non sarebbe nascosta, verrebbe visualizzata brevemente in linea nella pagina. Abbastanza brutto e poco professionale! Ma dopo una frazione di secondo, la pagina si renderizza correttamente e sembra proprio come mi aspettavo/volevo.

Nel corso del tempo, con l'aumentare delle dimensioni della pagina, è aumentata la volta in cui la pagina sarebbe rimasta in modo errato. La mia ipotesi è che il motore di rendering del browser stia effettuando il rendering della pagina mentre sta caricando, quindi alla fine sta dando il via alla JQuery che trasformerà il < > div in una finestra di dialogo. Questa funzione di JQuery trasformerà quindi il semplice <div> in una finestra di dialogo di JQuery e lo nasconderà (poiché ho la proprietà autoOpen impostata su false). Alcuni browser <tosse> IE </tosse > lo visualizzano più a lungo di altri. La mia finestra di dialogo di grandi dimensioni ora causa il rendering non corretto della pagina per circa 1 secondo ... YUCK!

Answer 1

È possibile aggiungere un po 'di CSS quindi è nascosta per impostazione predefinita, nessun codice onload necessario:

#myDialog { display: none; } 

Con questo, nessun altro codice è necessario, quando si apre la finestra di dialogo che sarà invertire questo stile ... quindi niente di più da eseguire su document.ready.In alternativa, se si dispone di un sacco di finestre di dialogo, dargli una classe, come questo:

<div id="myDialog" class="dialog"></div> 

Con questo CSS:

.dialog { display: none; } 

In quasi tutti i casi, jQuery utilizza l'attributo display stile di nascondere le cose, in questo modo, inizialmente, per nascondere qualcosa funzionerà con qualsiasi cosa desideri utilizzare successivamente, sia che si tratti di una finestra di dialogo, di un semplice .fadeIn(), ecc.

Answer 2

Mi è venuta una risoluzione a questo problema che funziona correttamente, ma Mi chiedo se qualcuno sa di un modo migliore.

Il problema è che il browser esegue il rendering del DOM mentre lo carica, quindi spara il JQuery .js alla fine che lo nasconde. Quindi quello che sto facendo è disattivare la visibilità in un tag principale <div> in modo che tutto il contenuto della finestra di dialogo sia nascosto per impostazione predefinita, quindi trasformando il tag <div> in .js.

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog"> 
     <!-- ... more html in here for the dialog --> 
    </div> 
</div> 

poi i .js JQuery:

<script type="text/javascript"> 

$(document).ready(function() { 
    //turn the visibility on last thing 
    $("#bodyDiv").attr("style", "visibility:visible"); 
}); 
</script> 

, come potete vedere, ho solo per default disattivare la visibilità di tutto in modo che il rendering della pagina w/o la visualizzazione del contenuto di dialogo, quindi mi rivolgo la visibilità di nuovo. Questa non è una soluzione perfetta perché può ancora rendere divertente la pagina per un secondo, ma almeno la finestra di dialogo HTML non viene visualizzata in linea. L'UX con questa correzione è accettabile, sebbene non ideale.

Answer 3

Uso i selettori CSS3 con un po 'di convenzione di denominazione &. Tutte le mie finestre di dialogo sono elementi <div> e l'ID termina sempre con "finestra di dialogo". Ho quindi utilizzare questo CSS:

div[id$=dialog] { display: none; } 

una finestra di dialogo di esempio:

<div id="my-sample-dialog" title="Sample Dialog"> 
     <span>I'm invisible!</span> 
</div> 

In caso CSS3 non è un'opzione, è possibile utilizzare CSS2 per ottenere lo stesso risultato, ma bisogna essere più attenti a non per utilizzare la finestra di moniker in qualsiasi <div> id non destinati ad essere nascosto:

div[id~=dialog] { display: none; } 

e impostare il dialogo id a qualcosa come "il mio dialogo campione"

Answer 4

Se stai usando un "pop-up" piuttosto che un "dialogo" Dovevo fare quanto segue:

HTML

<div data-role="popup" class="popup"> 
    <!-- CONTENT --> 
</div> 

CSS

.popup { display:none; } 
.ui-popup-container .popup { display:block; } 

inizialmente ho nascondere il popup usando display: nessuno e dopo jQueryUI avvolge il popup in un contenitore, l'altro stile ha la precedenza.