Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Como funciona el elemento link

Estas en el tema de Como funciona el elemento link en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/05/2013, 18:35
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 11 años, 9 meses
Puntos: 131
Como funciona el elemento link

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
  #2 (permalink)  
Antiguo 06/05/2013, 19:31
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 6 meses
Puntos: 641
Respuesta: Como funciona el elemento link

bueno no soy muy ducho pero ahí voy.

Creo que si hablas de load como tal te refieres a jquery o algun otro framework, por que si hablamos de javascript sería "onload".

Según he leído, onload es el evento que se dispara cuando carga un elemento del DOM html

y puede ser aplicado por ejemplo a

Código HTML:
Ver original
  1. <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>, <style>

por lo que el evento se dispara dependiendo a que etiqueta lo tomes.

en el caso de jquery, sé que
Código Javascript:
Ver original
  1. $(document).load()
o ready se dispara (perdón por tantos disparos) cuando se cargaron todos los elementos semanticos del DOM. Excluyendo por ejemplo las imágenes y el CSS

En cambio
Código Javascript:
Ver original
  1. $(window).load
cuando toda la página es completamente cargada

en javascript puro sería algo así:

Código Javascript:
Ver original
  1. window.onload=function(){
  2.     //codigo
  3. };

a ver si alguien con más conocimientos como emprear dice algo más
  #3 (permalink)  
Antiguo 07/05/2013, 01:25
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 12 años
Puntos: 45
Respuesta: Como funciona el elemento link

Buenas,

lo primero que se descarga es el documento html. El resto de recursos se va descargando de forma secuencial según van apareciendo en el documento, pero la mayoría de ellos (menos los scripts) se descargan en paralelo, los navegadores modernos suelen descargar de seis en seis. No sólo se descargan, también se interpretan, es por esto que los scripts bloquean la descarga paralela hasta que no ha acabado de interpretarse todo el código que contienen porque pueden modificar el DOM y la carga del resto de recursos puede depender de él. Por esto conviene poner los scripts después de haber cargado las hojas de estilos, para que la página se vea antes y parezca que la descarga es más rápida. Existen muchas técnicas para acelerar la descarga de scripts (algunos navegadores, creo que IE, permiten la descarga paralela aunque siguen bloqueando la descarga del resto de recursos) pero hay que tener cuidado si existen dependencias entre ellos para que el orden de carga sea el adecuado.
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus
  #4 (permalink)  
Antiguo 07/05/2013, 11:17
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 11 años, 9 meses
Puntos: 131
Respuesta: Como funciona el elemento link

Gracias por responder

memoadian en cuanto a lo que pregunto me refiero a javascript puro y utilizando el evento sobre window, creo que tuve que ser mas especifico n_n

Tecna
En cuanto los scripts es mas visible que se van descargando e interpretando pero en cuanto a las hojas de estilo no tanto


Saludos
  #5 (permalink)  
Antiguo 07/05/2013, 21:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 6 meses
Puntos: 1567
Respuesta: Como funciona el elemento link

Cita:
Iniciado por hackjose Ver Mensaje
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 original
  1. body{
  2. background: lime;
  3. }
  4. div.uno{
  5. font-weight: bold;
  6. }

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: elemento, html5, link
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:35.