onload evento
Ejemplo
Ejecute un JavaScript inmediatamente después de que se haya cargado una página:
<body onload="myFunction()">
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento onload ocurre cuando se ha cargado un objeto.
onload se usa con mayor frecuencia dentro del elemento <body> para ejecutar un script una vez que una página web ha cargado completamente todo el contenido (incluidas imágenes, archivos de script, archivos CSS, etc.).
El evento onload se puede utilizar para comprobar el tipo de navegador y la versión del navegador del visitante, y cargar la versión adecuada de la página web en función de la información.
El evento onload también se puede usar para tratar con cookies (consulte "Más ejemplos" a continuación).
Compatibilidad con navegador
| Event | |||||
|---|---|---|---|---|---|
| onload | Yes | Yes | Yes | Yes | Yes |
Sintaxis
En HTML:
<element onload="myScript">
En JavaScript:
object.onload = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("load", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | No |
|---|---|
| Cancelable: | No |
| Tipo de evento: | UiEvent si se genera desde una interfaz de usuario, Event de lo contrario. |
| Etiquetas HTML compatibles: | <cuerpo>, <marco>, <iframe>, <img>, <tipo de entrada="imagen">, <enlace>, <script>, <estilo> |
| Versión DOM: | Eventos de nivel 2 |
Más ejemplos
Ejemplo
Usando onload en un elemento <img>. Alerta "La imagen está cargada" inmediatamente después de que se haya cargado una imagen:
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Ejemplo
Usando el evento onload para tratar con cookies:
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>