Mejora progresiva, el comportamiento cuando las páginas no se cargan completamente todavía

Question

Estoy desarrollando sitios mediante la mejora progresiva implementado por completo en jQuery.

Por ejemplo, yo estoy añadiendo manejadores de eventos onclick dinámicamente para anclar etiquetas para reproducir archivos MP3 vinculados "en línea" con SoundManager y apareciendo los jugadores de Youtube para enlaces de noticias, a través de $ (document) ready (function ()).

Sin embargo, si el usuario hace clic en ellos mientras se carga la página, que aún así obtener la versión no mejorada.

He pensado acerca de cómo ocultar el material relevante (a través de la pantalla: ninguno, o algo por el estilo). Y que lo muestra cuando está cargado, o poniendo un diálogo modal "carga", pero tanto el sonido como hacks

Cualquier mejores ideas? Siento que estoy perdiendo algo completamente obvio aquí.

Saludos,

Alex

Answer 1

No he probado esto, pero usted podría intentar live . La idea es que se puede poner sus manipuladores clic fuera del document.ready para que se ejecutan de inmediato. Desde live utiliza delegación de eventos para lograr su funcionalidad, que realmente no necesita esperar a que el DOM esté listo, y los clics que se realizan mientras la página se carga todavía debe ser capturado por el controlador de eventos.

Si esto no funciona, puede intentar poner las etiquetas de script de Javascript directamente por debajo de lo que necesitan para unirse. No es bonito, pero eliminará prácticamente el problema.

Answer 2

Suponiendo que usted ha utilizado el buen juicio y la gente está cayendo para la versión no mejorada sólo porque el retraso es demasiado largo, me gustaría utilizar CSS para desactivar los controles . El CSS se carga casi de inmediato. Luego, utilizando Javascript Me gustaría cambiar el CSS por lo que los controles se vuelven a habilitar.

Sin embargo, mi primera reacción es que si el usuario puede hacer clic mientras se carga la página, entonces su página o la conexión es demasiado lenta. Sin embargo, si esto es raramente el caso - menos del 1% de las veces - entonces usted puede encogerse de hombros, siempre que el usuario puede conseguir su objetivo, que es escuchar su música. Digo esto porque una vez que los usuarios se da cuenta de que una mejor experiencia de espera medio segundo más tarde, se suele esperar a que Javascript render y haga clic.

Answer 3

Me tomo la postura opuesta a aleemb respecto al uso de CSS. Si utiliza CSS para desactivar los controles, entonces cualquiera que ha desactivado JavaScript o está utilizando software de accesibilidad será incapaz de usar esos controles sin desactivar por completo la hoja de estilos.

Se puede usar un muy pequeño JavaScript en línea justo antes de la etiqueta del cuerpo de cierre para ocultar los elementos a través de JS muy rápido. Si es en línea y no tener que cargar los recursos externos que será muy rápido, generalmente más rápido que un usuario puede hacer clic.

Sin embargo, I lo de acuerdo con aleemb que si los usuarios son capaces de procesar mentalmente la página y hacer que el control que desean hacer clic antes de que sus js se carga, es probable que haya un problema más profundo con la forma en que se carga la página. Mira en las maneras de disminuir el tiempo de carga:. Compresión de archivos de imágenes, archivos gzipping HTML / CSS / JS, minify JavaScript, combinar imágenes en sprites, etc.

Answer 4

Me gustaría sugerir siguiente asesoramiento de Paolo Bergantino -. delegación de eventos es el camino a seguir para evitar el problema por completo

Yo tenía un problema similar donde delegación de eventos no podía hacer el trabajo - puede leer sobre eso aquí .