diferencia entre pageLoad, onload y $ (document) ready()

Question

necesito saber con más detalle de lo que es la diferencia entre pageLoad, onload & $ (document) ready()

he encontrado respuesta, pero eso no es muy claro para mí. la respuesta es como

El evento ready se produce después de que el documento HTML se ha cargado, mientras que el proceso de carga se produce más tarde, cuando todo el contenido (por ejemplo, imágenes) también ha sido cargado.

El evento de carga es un evento estándar en el DOM, mientras que el evento de listo es específico de jQuery. El objetivo del evento listo es que ocurra tan pronto como sea posible después de que el documento se haya cargado, de modo que el código que agrega funcionalidad a los elementos de la página no tenga que esperar a que se cargue todo el contenido.

la persona que intenta decir evento ready se produce después de que el documento HTML se ha cargado y ocurren proceso de carga después de todo elemento de página como la imagen, etc que se está cargando.

Entonces, ¿qué es la carga de documentos HTML? Sé que la carga de documentos HTML significa que se completó toda la carga del elemento de la página.

¿Qué significa que dom está listo o cargado? ¿Cuál es la diferencia entre la carga del documento HTML & dom? Por favor hazme entender con el ejemplo. Gracias

Answer 1

No sé a qué te refieres con pageLoad, pero aquí hay alguna información sobre onload y $(document).ready().

window.onload se dispara cuando todo en la página ha terminado de cargarse. Esto significa que no solo se carga todo el DOM, sino que los recursos vinculados, como las imágenes, están completamente cargados. Como esto espera a que las imágenes terminen de cargarse, a veces puede tomar mucho tiempo disparar window.onload. A menos que realmente necesite esperar hasta que las imágenes terminen de cargarse, generalmente no desea esperar tanto para comenzar a ejecutar su javascript que modifica la página o conecta manejadores de eventos, etc ...

$(document).ready() es un jQuery-specific evento que se dispara tan pronto como el DOM está listo para la manipulación, pero posiblemente mucho antes de que las imágenes hayan terminado de cargarse. Esto ocurre después de que todos los objetos presentes en el HTML de la página hayan sido analizados e inicializados por el navegador y después de que se hayan cargado todos los scripts en la página. En el momento de este evento, es seguro modificar el DOM en todos los navegadores. Esto incluso puede ocurrir un poco antes o más tarde en algunos navegadores, ya que el mecanismo para detectar cuándo el DOM se carga de forma segura varía entre los navegadores más antiguos y los más nuevos.

La implementación 1.6.x jQuery para $(document).ready() utiliza un número de diferentes mecanismos de detección para cuando el DOM está listo. El método preferido es cuando el evento DOMContentLoaded dispara en el objeto de documento. Sin embargo, este evento sólo es compatible con todos los navegadores por lo que ha repliegue mecanismos para otros navegadores.

Ambos eventos sólo se disparará una vez por página.

Answer 2

Vamos a dibujar una analogía de comparar el proceso de carga de una página web a un cocinero con una receta:

En primer lugar, el chef (navegador) lee la receta completa (descarga el documento HTML), para asegurarse de que él entiende los pasos (código HTML) y sabe qué ingredientes (imágenes), utensilios (hojas de estilo) y electrodomésticos (guiones externos) necesitará tener en su cocina (caché del navegador).

Mientras el chef continúa leyendo, envía a su asistente a la despensa para obtener los ingredientes, utensilios y electrodomésticos (descargue los otros archivos del servidor). Cuando termina de leer la receta ($(document).ready()), comienza a seguir los pasos (mostrar la página), pero a veces llega a un paso antes de que su asistente regrese con los materiales necesarios para completar ese paso. Sin embargo, es bastante hábil, por lo que aún puede completar los pasos posteriores mientras espera. (La analogía se rompe un poco aquí, pero básicamente: el navegador establece la página tan bien como puede sobre la base del HTML; cuando ves una página cargar y luego las fuentes o el diseño cambian después de un par de segundos porque finalmente obtuve la hoja de estilo ... solo imagine que este chef de alguna manera puede agregar huevos a un pastel que ya está en el horno).

Es solo después de que el asistente del chef haya traído todo lo identificado en la receta a la cocina (el navegador ha cargado todo el contenido) que el chef puede poner la comida completa en el plato y decorarla (ejecute el código de evento onload).

---

El proceso de carga es un evento estándar en el DOM, mientras que el evento ready es específico para jQuery.

El DOM es el Document Object Model, un componente básico de JavaScript ordinaria. Esto significa que todos los navegadores web modernos ya saben lo que significa onload.

jQuery es una biblioteca de JavaScript ampliamente utilizada. Para que su secuencia de comandos use correctamente $(document).ready(), tendrá que vincular a una copia de la biblioteca de jQuery. Los navegadores no saben lo que significa $(document).ready() sin jQuery.