Cita:
Iniciado por hackjose Que tal compañeros
Hoy estuve viendo acerca de como se descargan los scripts y las hojas de estilo
Lei que el evento load se lanza cuando la pagina y sus los elementos externos son totalmente cargados
dice cargados pero no aplicados
Entonces es posible que el evento load se lance y todavia no se termine de aplicar todos los estilos(osea ya se tienen todos los estilos pero todavia no se aplican)
O como funciona esto?
Supongo que primero se necesita la estructura para despues aplicar los estilos descargados
Espero me puedan orientar
Saludos
Las hojas de estilo se ejecutan siempre tras la carga del DOM, sin importar cuando se declaren ó carguen, si bien lo que sigue es incorrecto, no va a impedir que se ejecuten
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="uno">
Hola
</div>
</body>
</html>
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
estilos.css
Código CSS:
Ver originalbody{
background: lime;
}
div.uno{
font-weight: bold;
}
Demo:
http://foros.emprear.com/css/test_ca..._al_final.html
Nada tiene que ver esto con el evento onload de javascript.
Las scripts js igualmente, se cargan cuando se declaren, recordá siempre que la lectura del DOM es secuencial, ahora que por supuesto su ejecución, dependerá de lo que quieras hacer, y si se requiere, ejecutar determinada función solo onload, es decir cuando el DOM fue leido correctamente, algo muy básico pero que clarifica
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Carga</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div{
width: 100px;
height: 100px;
border: solid 1px #666;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
alert('hola');
document.getElementById('a').innerHTML = "Este es el div de id a";
//]]>
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<script type="text/javascript">
//<![CDATA[
document.getElementById('b').innerHTML = "Este es el div de id b";
//]]>
</script>
</body>
</html>
El elemento 'a' no podrá ser identificado, la script se ejecuta automaticamente al ser leída y recibe un null para 'a', ya que aún no ha sido creado (habría que haber usado onload), por el contrario la segunda script corre perfectamente, porque para cuando se ejecuta, sin necesidad de onload, el elemento 'b' ya ha sido generado
Demo:
http://foros.emprear.com/css/test_ca...e_scripts.html
Saludos