Se llamará al evento body.onload() una vez que se hayan cargado el DOM y todos los recursos asociados, como las imágenes. Básicamente, onload() se llamará cuando la página se haya cargado por completo con imágenes completas, iframes y hojas de estilo, etc.
Por ejemplo, si nuestra página contiene una imagen de mayor tamaño, el evento onload() esperará hasta que la imagen esté completamente cargada.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script
src="https://code.jquery.com/jquery-git.js">
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body onload="loadBody()">
<h2>GeeksForGeeks</h2>
<script>
function loadBody(){
alert("page loaded");
}
</script>
</body>
</html>
Producción:
cuerpo onload
La función document.ready() se ejecutará tan pronto como se cargue el DOM. No esperará a que se carguen los recursos como imágenes, scripts, objetos, iframes, etc.
Podemos tener varias funciones document.ready() en nuestro código, pero solo se permite una función body.onload() .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body onload="loadBody()">
<h2>GeeksForGeeks</h2>
<script>
$(document).ready(function(){
alert("ready - page loaded")
})
</script>
</body>
</html>
Producción:
DOM está listo
Diferencia entre body.onload y document.ready:
| cuerpo.onload() | documento.listo() |
|---|---|
| onload() se llamará solo cuando todo se cargue. | Esta función se llama tan pronto como se carga DOM. |
| Esperará hasta que se carguen todos los recursos como imágenes, iframes, objetos, scripts. | Se llamará una vez que se cargue el DOM. |
| Solo podemos tener una función body.onload() . | Podemos tener múltiples documentos. función ready() en nuestra página. |
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA