Saltar al contenido

¿Cómo hacer que JavaScript se ejecute después de cargar la página?

Solución:

Estas soluciones funcionarán:

<body onload="script();">

o

document.onload = function ...

o incluso

window.onload = function ...

Tenga en cuenta que la última opción es una mejor manera de hacerlo ya que es discreto y se considera más estándar.

Tenga en cuenta que cargar la página tiene más de una etapa. Por cierto, esto es JavaScript puro

“DOMContentLoaded”

Este evento se dispara cuando el El documento HTML inicial se ha cargado y analizado por completo., sin esperar a que las hojas de estilo, las imágenes y los subcuadros terminen de cargarse. En esta etapa, puede optimizar mediante programación la carga de imágenes y CSS en función del dispositivo del usuario o la velocidad del ancho de banda.

Se ejecuta después de que se cargue DOM (antes de img y css):

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Nota: JavaScript síncrono detiene el análisis del DOM. Si desea que el DOM se analice lo más rápido posible después de que el usuario solicitó la página, puede convierte tu JavaScript en asincrónico y optimizar la carga de hojas de estilo

“carga”

Un evento muy diferente, carga, solo debe usarse para detectar un página completamente cargada. Es un error increíblemente popular usar load donde DOMContentLoaded sería mucho más apropiado, así que tenga cuidado.

Se ejecuta después de que todo se carga y analiza:

window.addEventListener("load", function(){
    // ....
});

Recursos de MDN:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

Lista de MDN de todos los eventos:

https://developer.mozilla.org/en-US/docs/Web/Events

Una forma razonablemente portátil y sin marco de hacer que su script configure una función para que se ejecute en el momento de la carga:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *