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.

Entradas populares de este blog

Montar unidad samba con permisos de usuario

Primeros pasos NAS WD My Cloud EX2 Ultra

NAS casero con una Raspberry Pi o un Mini PC