progressive enhancement, il comportamento quando le pagine non sono ancora completamente caricate

Question

sto sviluppando siti utilizzando il progressive enhancement implementato completamente in jQuery.

Per esempio, io sto aggiungendo i gestori di eventi onclick dinamicamente per ancorare i tag per riprodurre file MP3 collegati "in linea" con SoundManager e iniziano ad essere giocatori di Youtube per i link di YouTube, tramite $ (document) .ready (function ()).

Tuttavia, se l'utente fa clic su di loro mentre il caricamento della pagina, che ancora ottenere la non-migliorata versione.

Ho pensato di nascondere la roba rilevanti (tramite display: none, o qualcosa di simile). E mostrando quando caricato, o mettere una finestra di dialogo modale "loading", ma entrambi suonano come hack

Tutte le idee migliori? Sento che mi manca qualcosa di completamente ovvia.

Saluti,

Alex

Answer 1

Non ho ancora testato questo, ma si potrebbe provare a live . Il pensiero è che si potrebbe mettere i gestori di clic al di fuori del document.ready in modo che vengono eseguiti subito. Dal momento che live utilizza delegazione evento di raggiungere è la funzionalità, non si ha realmente bisogno di aspettare per il DOM per essere pronti, e ogni clic che sono fatti mentre la pagina si sta caricando dovrebbe ancora essere catturato dal gestore di eventi.

Se questo non dovesse funzionare, si potrebbe provare a mettere i tag di script Javascript direttamente sotto tutto ciò che hanno bisogno di impegnare. Non è bello, ma sarà praticamente eliminare il problema.

Answer 2

Supponendo di aver usato il buon senso e la gente sta cadendo per la versione non-enhanced solo perché il ritardo è troppo lungo quindi vorrei usare CSS per disabilitare i comandi . Il CSS caricherà quasi subito. Poi utilizzando Javascript vorrei alternare il CSS in modo che i controlli sono nuovamente abilitati.

Tuttavia, la mia prima reazione è che se l'utente può fare clic su esso mentre la pagina si carica, quindi la pagina o la connessione è troppo lenta. Tuttavia, se questo è raramente il caso - meno dell'1% del tempo - poi si può scrollarsi di dosso finché l'utente può raggiungere il suo obiettivo, che è ascoltare la sua musica. Dico questo perché una volta che gli utenti si rende conto che una migliore esperienza attende mezzo secondo dopo, di solito attendere che Javascript per rendere e quindi fare clic su.

Answer 3

I prendere la posizione opposta a aleemb per quanto riguarda usando i CSS. Se si utilizzano i CSS per disabilitare i controlli, quindi chi ha disattivato JavaScript o è utilizzando il software di accessibilità sarà in grado di utilizzare tali controlli senza disabilitare il vostro foglio di stile del tutto.

Si potrebbe utilizzare una piccola linea javascript a destra prima del tag body chiusura per nascondere gli elementi tramite js molto velocemente. Se è in linea e non deve caricare risorse esterne sarà molto veloce, in genere più veloce di un utente può fare clic.

Tuttavia, I do sono d'accordo con aleemb che se gli utenti sono in grado di elaborare mentalmente la pagina e renderlo al controllo che vogliono fare clic prima che i js viene caricato, probabilmente c'è un problema più profondo con il modo in cui la pagina viene caricata. Se vuoi in modi per diminuire il tempo di caricamento:. Compressione dei file di immagine, gzipping html css file / / js, minify tua Javascript, combinare immagini in sprite, ecc

Answer 4

Io suggerirei seguente consiglio di Paolo Bergantino -. delegazione evento è la strada da percorrere per evitare il problema del tutto

Ho avuto un problema simile in cui la delega evento non poteva fare il lavoro - puoi leggere che qui .