JavaScript y los navegadores
Hoy voy a documentar una duda sobre programación en JavaScript, tal vez algo técnica para alguno de vosotros, pero la voy a documentar para tenerla para futuras ocasiones y para poder preguntar a Google.
Esta duda surgió con mis alumnos, tras explicar cómo funciona el evento onload y ver un comportamiento no esperado en el navegador Chrome.
Se trata de como interpretan el evento window.onload los navegadores. Deberían ejecutar el código tras cargar y mostrar en pantalla todos los elementos HTML, y de hecho así lo hace Firefox pero no Chrome ni derivados como Edge.
El código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ONLOAD</title>
<script type="text/javascript">
window.onload=function(){
alert("Debería salir después del párrafo");
}
</script>
</head>
<body>
<p>Antes del alert</p>
</body>
</html>Es algo muy sencillo , se muestra el texto del párrafo y después y sólo después debería saltar la alerta.
En Firefox:
Hace lo que dice el estándar de JavaScript, sale el alert y ya se ve el texto del párrafo detrás.
En Chrome:
¿Dónde está el texto del párrafo?
Ya estaba decidido a preguntar a Google cuando he investigado algo más y he visto el siguiente código:
<!doctype html>
<head>
<script>
window.onload = function() { alert('Pagina cargada');};
</script>
</head>
<body>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
</body>
</html>
La imagen tarda en cargarse a propósito para ver cuando salen los alerts y ahora en Chrome sale bien (en Firefox sale bien el onload , la carga de la imagen no), la alerta salta tras cargar la imagen. 😲
Ahora sí que no entiendo nada.
Sigo investigando y acepto sugerencias o interpretaciones a este comportamiento.
