javascript - change - jquery css important
¿Está listo también CSS(document).ready()? (5)
Tengo un script que se ejecuta en $ (document) .ready () que se supone que alinea verticalmente el elemento de bloque en mi diseño. 90% del tiempo, funciona sin problemas. Sin embargo, por ese 10% extra, sucede una de estas dos cosas:
Hay un retraso obvio en el tiempo que toma hacer el centrado, y los elementos del bloque saltan a su posición. Esto podría ser simplemente relacionado con el rendimiento, ya que el tamaño de la página suele ser grande y hay una cantidad considerable de javascript que se ejecuta de inmediato.
El centrado se desordene por completo, y el elemento de bloque se empujará hacia abajo demasiado o no lo suficiente. Parece como si intentara calcular la altura, pero estaba obteniendo mediciones incorrectas.
¿Hay alguna razón por la cual la ejecución de un script en DOM-ready no tenga todos los valores correctos de CSS inyectados en el DOM todavía? (todo el CSS está en <head> través de <link> ).
Además, aquí está la secuencia de comandos que está causando el problema (sí, se ha tomado directamente desde here ):
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i) {
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css(''margin-top'', mh);
});
};
})(jQuery);
Gracias.
Según HTML5, DOMContentLoaded es un evento listo para DOM sin tener en cuenta las hojas de estilo. Sin embargo , el algoritmo de análisis HTML5 requiere que los navegadores difieran la ejecución de los scripts hasta que se carguen todas las hojas de estilo anteriores. ( DOMContentLoaded y hojas de estilo )
En las pruebas de Molily (2010) ,
- IE y Firefox bloquearon todas las ejecuciones de scripts posteriores hasta que se cargaron las hojas de estilo
- Webkit bloqueó la ejecución posterior solo para scripts externos (
<script src>) - Opera no bloqueó la ejecución posterior de ningún script
Todos los navegadores modernos ahora soportan DOMContentLoaded (2017) por lo que pueden haber estandarizado este comportamiento por ahora.
De las notas de la versión 1.3 :
El método ready () ya no intenta hacer ninguna garantía sobre la espera de que se carguen todas las hojas de estilo. En su lugar, todos los archivos CSS deben incluirse antes de los scripts en la página. Más información
De la documentación lista (fn) :
Nota: asegúrese de que todas las hojas de estilo estén incluidas antes de las secuencias de comandos (especialmente aquellas que llaman a la función lista). Al hacerlo, se asegurará de que todas las propiedades de los elementos estén definidas correctamente antes de que el código jQuery comience a ejecutarse. De lo contrario, se producirán problemas esporádicos, especialmente en navegadores basados en WebKit como Safari.
Tenga en cuenta que lo anterior ni siquiera se trata de representar el CSS, por lo que aún puede ver que la pantalla cambie cuando ready() . Pero debería evitar problemas.
En realidad, me parece un poco extraño que solo poner el CSS sobre el JS resuelva todos los problemas. El CSS se carga de forma asíncrona, por lo que la carga de JS puede comenzar y finalizar mientras se está descargando el CSS. Entonces, si lo anterior es una solución, ¿entonces la ejecución de cualquier código JS se detiene hasta que se completen todas las solicitudes anteriores?
Hice algunas pruebas, y de hecho, a veces JS se retrasa hasta que se cargue el CSS. No sé por qué, porque la cascada muestra que el JS ha terminado de cargarse mucho antes de que la descarga del CSS haya finalizado.
Consulte JS Bin para obtener algunos HTML y sus resultados (esto tiene un retraso de 10 segundos), y consulte webpagetest.org para conocer los resultados de la cascada . Esto usa algunos guiones de cuzillion.com de Steve Souders para imitar respuestas lentas. En la cascada, la referencia a resource.cgi es el CSS. Entonces, en Internet Explorer, el primer JS externo comienza a cargarse justo después de que se solicitó el CSS (pero ese CSS tardará otros 10 segundos en finalizar). Pero la segunda etiqueta <script> no se ejecuta hasta que el CSS haya terminado de cargarse también:
<link rel="stylesheet" type="text/css" href=".../a script that delays.cgi" />
<script type="text/javascript" src=".../jquery.min.js"></script>
<script type="text/javascript">
alert("start after the CSS has fully loaded");
$(document).ready(function() {
$("p").addClass("sleepcgi");
alert("ready");
});
</script>
Otra prueba con un segundo JS externo después de obtener jQuery, shows que la descarga del segundo JS no se inicia hasta que el CSS se haya cargado. Aquí, la primera referencia a resource.cgi es el CSS, el segundo al JS:
Mover la hoja de estilos debajo de todos los JS de hecho muestra que el JS (incluida la función ready ) se ejecuta mucho antes, pero incluso entonces la clase aplicada a jQuery, que aún se desconoce cuando se ejecuta el JS, se usa correctamente en mis pruebas rápidas en Safari y Firefox. Pero tiene sentido que cosas como $(this).height() produzcan valores incorrectos en ese momento.
Sin embargo, pruebas adicionales muestran que no es una regla genérica que JS se detenga hasta que se cargue CSS definido anteriormente . Parece haber alguna combinación con el uso de JS y CSS externos. No sé cómo funciona esto.
Últimas notas: como JS Bin incluye Google Analytics en cada secuencia de comandos cuando se ejecuta desde la URL jsbin.com/aqeno (como jsbin.com/aqeno , los resultados de la prueba son cambiados por JS Bin ... Parece que la pestaña Salida en la URL de edición como jsbin.com/aqeno/edit no incluye las características adicionales de Google Analytics, y seguramente arroja resultados diferentes, pero esa URL es difícil de probar usando webpagetest.org. La referencia a las hojas de estilo se bloquea las descargas en Firefox y la ejecución de JavaScript en IE como se indica en strager es un buen comienzo para una mejor comprensión, pero me quedan muchas preguntas ... También tenga en cuenta el IE8 Parallel Script de Steve Souders Cargando para complicar aún más las cosas (las cascadas anteriores se crean con IE7).
Tal vez uno debería simplemente creer las notas de la versión y la documentación ...
El DOM listo se dispara cuando todos los nodos DOM están disponibles. No tiene nada que ver con CSS. Intente posicionar el estilo antes o intente cargarlo de manera diferente.
El orden CSS / JavaScript / JQuery no funciona para mí, pero el siguiente hace:
$(window).load(function() { $(''#abc'')...} );
Según mi leal saber y entender, el evento listo se activa cuando se carga DOM, lo que significa que todas las solicitudes de bloqueo (es decir, JS) se han cargado y el árbol DOM está completamente graficado. El estado listo en IE depende de un desencadenante de evento más lento (document.readyState change vs DOMContentLoaded) que la mayoría de los demás navegadores, por lo que el tiempo también depende del navegador.
La existencia de solicitudes no bloqueantes (como CSS e imágenes) es completamente asincrónica y no está relacionada con el estado listo. Si se encuentra en una posición en la que necesita dichos recursos, debe depender del buen evento de carga anterior.