¿Detener javascript parpadea cuando se manipula el contenido de la página?

Cuando hago sitios que tienen javascript que manipulan la página, y esta manipulación ocurre en la carga de la página, a menudo obtengo un desagradable efecto de parpadeo.¿Detener javascript parpadea cuando se manipula el contenido de la página?

Por ejemplo, si tuviera un acordeón, el contenido completo debería cargarse como html, y una vez cargado, podría completarse con javascript. Esto significa que, por un momento, el contenido completo es visible y luego parpadea, ya que parte está oculto.

Una solución sería ocultar cualquier contenido parpadeante con css, y luego mostrarlo (según sea necesario) con el javascript. El problema es que la página no funcionará correctamente para las personas que no tengan javascript.

¿Hay una manera mejor? Gracias

Fuente

2011-06-28 Evans

¿Qué evento está utilizando exactamente para inicializar su javascript? ¿Está OnLoad? – rciq

creo que la aproximación normal a esto es agregar una clase 'js' a cuerpo tan pronto como sea posible:

<!doctype html> 
... 
<body> 
<script>document.body.className='js';</script>

Se podría entonces adoptar algunas reglas CSS para garantizar que el contenido se ocultan cuando JS está disponible , algo como.

.js .accordion:nth-child(n+1) { display: none }

Fuente

2011-06-28 11:12:35 searlea

Esta es absolutamente la mejor solución. La función lista de jQuery espera hasta que el DOM esté totalmente ... listo. Si quieres ejecución rápida en un elemento, creo que este es el camino a seguir. –

Una buena manera es utilizando el document ready function in Jquery.

Fuente

2011-06-28 11:09:39

Salida this excellent article por Paul Irish - es básicamente una inversión del método que usted describe, ocultando con CSS hasta cargas JS. Al agregar <script>document.documentElement.className += 'js';</script> a la cabeza, básicamente obtienes los beneficios de ocultar contenido sin estilo antes de que esté listo para DOM, y también no daña a aquellos que no tienen Javascript.

Fuente

2011-06-28 11:12:39

Si cambia las propiedades de CSS después de que se cargue su página, se producirá dicho parpadeo. La mejor manera de hacer que el CSS tenga las mismas propiedades que el javascript lo manipula. De esa manera, también hará que su página sea más eficiente salteando reflujos/repintes adicionales en el navegador. Sin embargo, un truco es tener el javascript minimizado y cargarlo antes de su línea de carga css.

Fuente

2011-06-28 11:13:25

-1

No hay una mejor manera de hacer esto que utilice la mejora progresiva. En algún momento, tendrá que cargar toda la página y luego usar javascript para ocultar lo que no desea ver. Sin embargo, dado que javascript solo se puede ejecutar en el DOM una vez que se ha escrito, debe esperar a que se escriba para poder ocultarlo. Parece contraintuitivo, pero ahí lo tienes. Ese es el precio que pagamos por manipular el DOM :-)

Fuente

2011-06-28 11:13:25 Alex

Puede ejecutar JS incluso antes de que el DOM esté totalmente listo. Searlea tiene la respuesta a continuación. –

¿Detener javascript parpadea cuando se manipula el contenido de la página?

Respuesta

Cuestiones relacionadas