Diferencia entre $(document).ready y $(window).load y window.onload

Enviado por wilzonmb el martes, 28/07/2020 - 11:04

$(document).ready

Ejecuta el codigo cuando todo el HTML y DOM haya sido cargado, excepto las imágenes.

//llamada typo 1
$(document).ready(function() {
/** Trabaja cuando todo HTML haya sido cargado excepto las imágenes y DOM está listo **/
// Tu codigo aca
});
  
//llamada typo 2
$(function() {
/** Trabaja cuando todo HTML haya sido cargado excepto las imágenes y DOM está listo **/
//Tu codigo aca
});
  
//llamada typo 3
$(document).on('ready', function(){
/** Trabaja cuando todo HTML haya sido cargado excepto las imágenes y DOM está listo **/
//Tu codigo aca
});
  
//llamada typo 4
jQuery(document).ready(function(){
/** Trabaja cuando todo HTML haya sido cargado excepto las imágenes y DOM está listo **/
//Tu codigo aca
});
 
//Recomendacion.- Para no tener problemas con otras librerias poner el "$" y poner "jQuery" en lugar de "$"
jQuery(document).ready(function($){
    //Aqui tu codigo
});

 

$(window).load

Ejecuta el código cuando la página HTML, DOM, imágenes haya sido completamente cargada.

$(window).load(function() {
/** Esto trabaja cuando la página completa está completamente cargado, incluyendo todos los marcos, objetos e imágenes**/
});
 
//y una cosa más, no confundir con el evento de carga de la ventana con el método de carga jQuery ajax
// Método de carga en jQuery ajax
$("#elementid").load( "data.html" );

 

window.onload

El proceso de carga se produce cuando un objeto se ha cargado.
onload es la más utilizada en el elemento <body> para ejecutar un script una vez a la página web se ha cargado completamente todo el contenido (incluyendo imágenes, archivos de comandos, archivos CSS, etc.).

El proceso de carga se puede utilizar para comprobar el tipo de navegador y versión del navegador del visitante, y cargar la versión correcta de la página web en base a la información.

El proceso de carga también se puede utilizar para hacer frente a las cookies (ver "Más ejemplos" a continuación).

Syntax

<element onload="myScript">

En HTML

En el body onload llama a "myFunction()"

<body onload="myFunction()">

 

En JavaScript:

Llamará en body a la funcion "myFunction()"

function myFunction(){
   alert("call on body load");
}

 

Si tomamos un ejemplo relacionado con la imagen onload entonces se verá como a continuación

En HTML

<!-- En image onload llamará a la funcion myImageFunction() -->
<img src="image path src" onload="myImageFunction()">

 

En JavaScript

myFunction() que llamará la carga de imágenes

function myImageFunction(){
   alert("call on image load");
}

 

Ejemplo completo

<!doctype html>
<html>
  <head>
    <title>Ejemplo Onload</title>
    <script>
      function load() {
        alert("evento load detectado!");
      }
      window.onload = load;
    </script>
  </head>
  <body>
    <p>El Evento load se dispara cuando el documento ha terminado de cargarse!</p>
  </body>
</html>