Diferencia entre las funciones $ (ventana) .load () y $ (document) .ready ()

216

¿Cuál es la diferencia entre $(window).load(function() {})y $(document).ready(function() {})en jQuery?

jquery Satya
fuente

Respuestas:

266
  • document.readyes un evento jQuery, se ejecuta cuando el DOM está listo, por ejemplo, todos los elementos están ahí para ser encontrados / utilizados, pero no necesariamente todo el contenido .
  • window.onloadse dispara más tarde (o al mismo tiempo en los peores / fallidos casos) cuando se cargan imágenes y demás, por lo que si usa dimensiones de imagen, por ejemplo, a menudo quiere usar esto en su lugar.
Nick Craver
fuente
38
La abreviatura de $(document).ready(function(){})is $(function(){})y otra diferencia importante de window.load es que se ejecutará en TODAS las llamadas futuras de la función, incluso después del DOMready inicial.
Michael Butler
2
@dbliss Sí, creo que onload es la abreviatura de $(window).on('load'). Ambos haciendo referencia al evento de carga .
Lancer gratuito
55
@MichaelButler - ¿Qué quieres decir con it will run on ALL future calls of the function?
BornToCode
77
@MichaelButler: Debes ser más claro en tu comentario. 1) Estás hablando de que el USUARIO ejecuta más $(document).readycódigo una vez que el DOM está listo. Es un caso de uso tan pequeño que probablemente no valía la pena confundir a todos con mencionarlo. 2) El ENTORNO solo llama $(document).ready(f‌​unction(){})una vez, cuando el DOM está listo. Si el usuario, por alguna razón, ejecuta más $(document).readydespués de que el DOM esté listo, entonces sí, se ejecutará de inmediato.
Doug S
44
Ruego diferir, Michael. Vamos a dejarlo así y no degradarnos en comentarios inútiles. Al menos las personas confundidas ahora tienen su respuesta.
Doug S
73 
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});
SagarPPanchal
fuente
22

El $(window).load()NO está disponible en jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Para evitarlo, puede usarlo como un "Anexo de controlador de eventos" 

$( window ).on("load", function() {
        // Handler for .load() called.
});
Kean Amaral
fuente
14

Las diferencias son:

$(document).ready(function() { es un evento jQuery que se activa cuando se carga DOM, por lo que se activa cuando la estructura del documento está lista.

$(window).load() El evento se activa después de cargar todo el contenido.

Bharat Chodvadiya
fuente
9 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load se activará después de cargar todo el contenido del iframe

Shaik Rasool
fuente
7

$(document).ready sucede cuando todos los elementos están presentes en el DOM, pero no necesariamente todo el contenido.

$(document).ready(function() {
    alert("document is ready");
});

window.onloado $(window).load()sucede después de que se hayan cargado todos los recursos de contenido (imágenes, etc.).

$(window).load(function() {
    alert("window is loaded");
});
Purvik Dhorajiya
fuente
0

document.ready (jQuery) document.ready se ejecutará justo después de que se cargue el documento HTML y el DOM esté listo.

DOM: el Document Object Model (DOM) es una convención multiplataforma e independiente del lenguaje para representar e interactuar con objetos en documentos HTML, XHTML y XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (JavaScript incorporado) Sin embargo, window.load esperará a que la página se cargue por completo, esto incluye marcos internos, imágenes, etc. * window.load es un método de JavaScript incorporado, se sabe que tiene algunos peculiaridades en los navegadores antiguos (IE6, IE8, versiones antiguas de FF y Opera), pero generalmente funcionarán en todos ellos.

window.load se puede usar en el evento de carga del cuerpo como este (pero le sugiero encarecidamente que evite mezclar código como este en el HTML, ya que es una fuente de confusión más adelante):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});
Arun Kumar
fuente
0

$ (window) .load es un evento que se dispara cuando el DOM y todo el contenido (todo) en la página se carga completamente como CSS, imágenes y marcos. Un mejor ejemplo es si queremos obtener el tamaño real de la imagen o los detalles de cualquier cosa que la usemos.

$ (document) .ready () indica que el código debe ejecutarse una vez que se carga el DOM y está listo para ser manipulado por el script. No esperará a que se carguen las imágenes para ejecutar el script jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (ventana) .load disparada después de $ (documento) .ready ().

$ (window) .load quedó en desuso en 1.8 y se eliminó en jquery 3.0

Srikrushna
fuente
0

Creo que el $(window).loadevento no es compatible con JQuery 3.x

usuario8816619
fuente
1
Según la documentación, el evento $ (window) .load se eliminó en JQuery 3.0
Mathieu VIALES el
1
Esto es correcto. Para evitarlo, puede usarlo como un "Adjunto de controlador de eventos": $ (window) .on ("load", function () {// Se llama al controlador de .load ().});
Kean Amaral
0

De acuerdo con DOM Level 2 Events, loadse supone que el evento se activa document, no se activa window. Sin embargo, loadse implementa windowen todos los navegadores para la compatibilidad con versiones anteriores.

Jones Agyemang
fuente