Cómo ejecutar una función cuando la página se carga en JavaScript?

Ejecutar una función JavaScript cuando una página web se ha cargado completamente es bastante fácil. Hay múltiples formas de lograr esta tarea, algunas de las cuales incluyen agregar líneas en las etiquetas de elementos HTML, y otras incluyen el uso de funciones DOM y variables de estado en nuestro fragmento del código de script.

Este artículo utilizará los siguientes métodos para lograr la tarea en cuestión:

• Uso del evento Onload en la variable de la interfaz de Windows
• Poner un atributo de encendido dentro de la etiqueta
• Definición de un oyente de eventos personalizado en la variable de la interfaz de la ventana
• Uso del documento.Atributo OnreadyStateChange

Comencemos con el primero.

Método 1: Evento de Window Onload

El evento onload () se puede usar con cualquier elemento de una página HTML, y realizará las acciones dadas dentro de él después de que ese elemento se haya cargado completamente. Ejecutar una función solo después de todo "ventana"Se ha cargado, use la" ventana.propiedad de onload "en el archivo de script y establecerlo igual a una función como

ventana.onload = function ()
alerta ("la página ha sido cargada");
;

En la función, se envía una alerta que dice que "la página se ha cargado". Ejecute la página web HTML y observe los siguientes resultados:

Está claro desde la salida que la función se ejecutó después de que el navegador cargó completamente la "ventana" de la página web.

Método 2: Uso del atributo Onload con la etiqueta del cuerpo

Como la etiqueta del cuerpo incluye todos esos datos que se muestran en el navegador web, por lo tanto, poner un atributo de onar y configurarlo igual a una función en esa etiqueta esencialmente significaría ejecutar la función después de que todo en la página web se haya cargado completamente.

Por ejemplo, cree una página web HTML con estas líneas:

alt = ""
/>

Cómo ejecutar una función cuando la página se carga en JavaScript ?

Este es un ejemplo de atributo de carrocería

El punto clave aquí es que en el cuerpo hemos usado el atributo onload = "completamente cargado ()". Esto hará que la página web busque un "completamente cargado()"La función en el script después de todos los elementos dentro de la página web se ha cargado.

Dirígete dentro del archivo de script y agrega las siguientes líneas:

function completamente cargado ()
alerta ("La página web se ha cargado por completo!");

Ejecute el HTML, y la salida del navegador se verá así:

Se solicita al usuario después de la etiqueta del cuerpo, y todos los elementos dentro de la etiqueta del cuerpo se han cargado completamente.

Método 3: Agregar un oyente de eventos en la variable de la interfaz "Ventana"

Uno de los métodos más antiguos pero aún efectivos. En el archivo JavaScript, simplemente agregue un oyente de eventos usando el operador DOT con nuestro "ventana"Variable de interfaz. El estado dentro del oyente del evento será "carga"Y sobre ese cambio de estado, defina una función que se ejecute. Todo esto se logra usando las siguientes líneas:

ventana.addEventListener ("Load", function ()
alerta ("Está cargado!");
);

Después de eso, simplemente cargue la página web HTML en el navegador y observe la siguiente salida:

Se solicita al usuario tan pronto como la ventana esté completamente cargada. Sin embargo, observe que esta alerta aparece cuando el "ventana" está cargado. Esto significa que el usuario puede obtener la alerta antes de que todos los elementos se carguen por completo.

Método 4: Uso del atributo OnreadyStateChange del documento,

Dom tiene este atributo llamado "OnreadyStateChange"Que se enciende cada vez que cambia el estado del documento. Esto se puede usar para ejecutar una función, pero el único problema es que esta variable o atributo puede contener diferentes estados como la carga, pendiente, procesamiento y completo. Esto se debe a que este atributo se usa más para las solicitudes XML o HTML.

Se debe inducir una verificación para ejecutar una función solo cuando el documento esté completamente cargado. Use las siguientes líneas dentro del archivo JavaScript:

documento.onreadyStateChange = function ()
if (documento.ReadyState == "Complete")
Alerta ("Yahoo!");

;

En el fragmento de código anterior, se ha realizado un cheque para buscar un estado específico "completo" solo que el usuario está siendo alertado. Enciende la página web HTML y observa la salida:

El usuario fue alertado después de que el estado listo del documento estuvo "completo".

Envolver

Hay bastantes formas de ejecutar una función de JavaScript tan pronto como la página web se haya cargado por completo. Para demostrar esto, en este artículo, en cada método, ha utilizado un alerta función para mostrar una alerta que representa que la página web ejecutó la función JavaScript después de la carga completa de esa página web.