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.