Diferencia entre onload() y $.listo?


¿Puede enumerar la diferencia entre las funciones onload() y $(document).ready(function(){..}) en el uso de jQuery?

Author: George Garchagudashvili, 2010-12-09

8 answers

El evento load (también conocido como "onload") en el elemento window y/o body se activará una vez que todo se haya cargado el contenido de la página this esto incluye todas las imágenes, scripts, etc... todo.

Por el contrario, la función $(document).ready(...) de jquery utilizará un mecanismo específico del navegador para garantizar que se llame a su controlador lo antes posible después de que se cargue y se pueda acceder al dom HTML/XML. Este es el primer punto en el proceso de carga de la página donde se puede ejecutar de forma segura el script que pretende acceder a elementos en el dom html de la página. Este punto llega antes (a menudo mucho antes) que el evento final load, debido al tiempo adicional requerido para cargar recursos secundarios (como imágenes, etc.).

 66
Author: Lee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-17 06:10:23

Las principales diferencias entre los dos son:

  1. Cuerpo.Onload () evento será llamado solo después de que el DOM y los recursos asociados como imágenes se cargaron, pero el documento de jQuery.el evento ready () se llamará una vez que se cargue el DOM, es decir, no esperará a que se carguen los recursos como imágenes. Por lo tanto, las funciones en el evento ready de jQuery se ejecutarán una vez que se cargue la estructura HTML sin esperar los recursos.
  2. Podemos tener varios documentos.ready () en una página pero Cuerpo.Evento Onload() no.
 18
Author: Bhanu Prakash Pandey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-09 07:18:41
  1. Podemos tener más de una función document.ready() en una página donde solo podemos tener una función body onload.

  2. Documento.la función ready () se llama tan pronto como se carga DOM, donde la función body.onload() se llama cuando todo se carga en la página que incluye DOM, imágenes y todos los recursos asociados de la página.

 5
Author: Suhas Rathod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-12 07:18:57

document.ready() la función es diferente de la función body onload() por 2 razones.

  1. Podemos tener más de una función document.ready() en una página donde solo podemos tener una función body onload.
  2. La función document.ready() se llama tan pronto como se carga DOM, donde la función body.onload() se llama cuando todo se carga en la página que incluye DOM, imágenes y todos los recursos asociados de la página.
 3
Author: Raji,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-15 11:32:45

Documento.la función ready () se activa tan pronto como se carga HTML DOM. Pero la función onload () se activará después de HTML DOM, todo el contenido del cuerpo como imágenes cargadas.

 2
Author: user5755278,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-07 02:41:20

Cuerpo.onload () se preocupa tanto por la estructura HTML como por los recursos asignados como documento.ready () solo se preocupa por la estructura HTML.

 1
Author: sridiva,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-13 10:26:25

Onload tenga cuidado con el DOM y los recursos: comprueba si las imágenes están cargadas, el script está listo para ejecutarse y mucho más.

$.listo simplemente compruebe si hemos leído el DOM completo de la página.

Por favor, echa un vistazo a este enlace para más explicación y ejemplo: http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery /

 0
Author: Daniele Petrarolo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-07 17:45:46

Onload () se dispara cuando todo el contenido (todo) en el elemento objetivo está completamente cargado como CSS, imágenes, etc.

$.ready indica que el código en él debe ejecutarse una vez que el contenido de los elementos de destino se carga y está listo para ser manipulado por script. No esperará a que las imágenes se carguen para ejecutar el script jQuery.

.

Ex (carga del cuerpo):

<body onload="loadBody()">

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body

Ex (onload on an elemento):

<img src="w3html.gif" onload="loadImg()" width="100" height="132">

<script>
function loadImg() {
    alert("Image is loaded");
}
</script>

Ex3 ($.listo):

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>
 0
Author: Srikrushna Pal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-14 09:48:57