121

Estoy usando el siguiente código para ejecutar algunas declaraciones después de cargar la página.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

Pero este código no funciona correctamente. La función se llama incluso si se están cargando algunas imágenes o elementos. Lo que quiero es llamar a la función y la página se carga por completo.

javascript html image

— Neeraj Kumar
fuente

1

¿Podría agregar una demostración en JSFiddle.net ?

— Some Guy

2

¿Podrías usar jQuery? Si es así, intente$(window).load()

— Matt Hintzke

Sí, ¿podría explicar exactamente qué no funciona correctamente? ¿Está recibiendo un error, o quizás está llamando a una alertfunción antes de que la ventana se vuelva a dibujar (haciendo que parezca que se llama antes de la carga)? El código se ve bien y obligar a los usuarios a descargar bibliotecas grandes probablemente no solucionará este problema ni hará que sea más fácil de diagnosticar.

— Jeffrey Sweeney

doxdesk.com/img/updates/20091116-so-large.gif

— Jeffrey Sweeney

Cuando digo que no funciona, me refiero a que la función se activa incluso si se están cargando algunas imágenes.

— Neeraj Kumar

166

Esto puede funcionar para usted :

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

o si tu comodidad con jquery,

$(document).ready(function(){
// your code
});

$(document).ready()se activa en DOMContentLoaded, pero este evento no se activa de forma coherente entre los navegadores. Esta es la razón por la que jQuery probablemente implementará algunas soluciones alternativas para admitir todos los navegadores. Y esto hará que sea muy difícil simular "exactamente" el comportamiento usando Javascript simple (pero no imposible, por supuesto).

como sugirieron Jeffrey Sweeney y J Torres, creo que es mejor tener una setTimeoutfunción, antes de activar la función como se muestra a continuación:

setTimeout(function(){
 //your code here
}, 3000);

— Shreedhar
fuente

12

jQuery's readyno hará lo que solicitó el OP. readyse activa cuando se carga el DOM, no después de que se cargan los elementos. loadse disparará después de que los elementos terminen de cargarse / renderizarse.

— Jaime Torres

Parece que el OP quiere que todos los elementos se carguen por completo, no solo el HTML.

— Jeffrey Sweeney

3

@shreedhar o podría usar la herramienta adecuada para el trabajo ( load).

— Jaime Torres

14

setTimeoutes una mala idea. Se basa en que la página se cargue en menos de 3 segundos (o n segundos según el valor que elija). Si la carga demora más, no funcionará, y si la página se carga más rápido, tendrá que esperar sin motivo.

— JJJ

1

@ChristianMatthew its useCapture Si es verdadero, useCapture indica que el usuario desea iniciar la captura. Después de iniciar la captura, todos los eventos del tipo especificado se enviarán al oyente registrado antes de enviarse a cualquier EventTargets debajo de él en el árbol DOM. Los eventos que se propagan hacia arriba a través del árbol no activarán un oyente designado para usar la captura. Consulte Eventos DOM Nivel 3 para obtener una explicación detallada.

— Shreedhar

52

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

lo mismo para jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

NOTA: - No utilice el siguiente marcado (porque sobrescribe otras declaraciones del mismo tipo):

document.onreadystatechange = ...

— T.Todua
fuente

1

¿Se admite este navegador cruzado?

— bluejayke

Esta respuesta es mucho mejor que las demás. +1

— Xydez

¡Muy bien! Gracias.

— Farzin Kanzi

34

Si puede usar jQuery, mire load . Luego, puede configurar su función para que se ejecute después de que su elemento termine de cargarse.

Por ejemplo, considere una página con una imagen simple:

<img src="book.png" alt="Book" id="book" />

El controlador de eventos se puede vincular a la imagen:

$('#book').load(function() {
  // Handler for .load() called.
});

Si necesita que se carguen todos los elementos de la ventana actual, puede usar

$(window).load(function () {
  // run code
});

— Jaime Torres
fuente

1

¿El loadmétodo jQuery simplemente vincula una función al evento de carga usando Javascript? ¿En qué se diferenciaría esto de lo que ya está haciendo el OP?

— Alex Kalicki

@AlexKalicki AFAIK no sería diferente, excepto que jQuery podría usar en addEventListenerlugar de vincular la onloadpropiedad DOM0 .

— Alnitak

@AlexKalicki No puedo decir que use exactamente la misma funcionalidad, pero de acuerdo con la documentación, jQuery se asegura de que todos los elementos, incluidas las imágenes, se carguen antes de que se active. Yo tendería a creer que habría una lógica adicional en su lugar si este es el caso, y no tengo ninguna razón para no creer en la documentación, aunque nunca me he encontrado con el mismo problema que informa el OP.

— Jaime Torres

4

A partir de JQuery v1.8, .load está obsoleto. fuente

— Adonis K. Kakoulidis

1

La mejor solución para la pregunta.

— Roberto Sepúlveda Bravo

29

Estoy un poco confuso de que ¿qué quieres decir con carga de página completada, "Carga DOM" o "Carga de contenido" también? En una página html, la carga puede desencadenar un evento después de dos eventos de tipo.

Carga DOM: lo que garantiza que todo el árbol DOM se cargue de principio a fin. Pero no asegúrese de cargar el contenido de referencia. Suponga que agregó imágenes por las imgetiquetas, por lo que este evento asegura que todas imglas imágenes cargadas pero no las cargadas correctamente o no. Para obtener este evento debe escribir de la siguiente manera:
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
O usando jQuery:
```
$(document).ready(function(){
// your code
});
```
Después de DOM y carga de contenido: lo que indica el DOM y la carga de contenido también. Se asegurará no solo de imgetiquetar, también asegurará que se carguen todas las imágenes u otro contenido relativo. Para obtener este evento debe escribir de la siguiente manera:
```
window.addEventListener('load', function() {...})
```
O usando jQuery:
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

— Hanif
fuente

2

Esta es la única respuesta aquí que brinda una solución que no es jQuery para el OP, con una explicación clara

— Velojet

El DOMContentLoadedcontrolador de eventos @Hanif no parece hacer nada por mí, pero lo loadhace.

— Brandon Benefield

1

¿Los dos últimos ejemplos no necesitan punto y coma al final de las líneas?

— R. Navega

11

Si desea llamar a una función js en su página html, use el evento onload. El evento onload ocurre cuando el agente de usuario termina de cargar una ventana o todos los marcos dentro de un FRAMESET. Este atributo se puede utilizar con los elementos BODY y FRAMESET.

<body onload="callFunction();">
....
</body>

— usuario2361682
fuente

7

De esta manera puede manejar ambos casos, si la página ya está cargada o no:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

— tsveti_iko
fuente

3

Alternativamente, puede probar a continuación.

$(window).bind("load", function() { 
// code here });

Esto funciona en todos los casos. Esto se activará solo cuando se cargue toda la página.

— Ganesh Ram Ravi
fuente

3

Lo mejor que puedo hacer es usar

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

La respuesta n. ° 1 de usar el DOMContentLoadedevento es un paso atrás, ya que el DOM se cargará antes de que se carguen todos los activos.

Otras respuestas recomiendan lo setTimeoutque me opondría firmemente, ya que es completamente subjetivo al rendimiento del dispositivo del cliente y la velocidad de conexión de la red. Si alguien está en una red lenta y / o tiene una CPU lenta, una página podría tardar de varios a decenas de segundos en cargarse, por lo que no podría predecir cuánto tiempo setTimeoutnecesitará.

En cuanto a readystatechange, se dispara cada vez readyStateque cambian, lo que según MDN todavía será antes del loadevento.

Completar

El estado indica que el evento de carga está a punto de dispararse.

— Ryan Walker
fuente

2

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

— tvrcgo
fuente

2

Si bien este fragmento de código puede ser la solución, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo a la pregunta para los lectores en el futuro, y es posible que esas personas no conozcan los motivos de su sugerencia de código.

— yivi

@yivi si ese no es un mensaje automático: es bastante obvio para cualquiera lo que significa ese código, especialmente porque hay comentarios en el código ..

— bluejayke

1

Si no está utilizando ningún marco JS, este proyecto es la mejor manera de obtener el estado listo para dom, con compatibilidad entre navegadores

https://github.com/ded/domready/blob/master/ready.js

— Olivier Refalo
fuente

1

Si ya está usando jQuery, puede probar esto:

$(window).bind("load", function() {
   // code here
});

— santosh
fuente

4

Inútil sin explicación.

— Daniel W.

1

Puedo decirles que la mejor respuesta que encontré es poner un script de "controlador" justo después del </body>comando. Es la más fácil y, probablemente, más universal que algunas de las soluciones anteriores.

El plan: en mi página hay una mesa. Escribo la página con la tabla en el navegador y luego la ordeno con JS. El usuario puede recurrir a él haciendo clic en los encabezados de las columnas.

Después de que la tabla finaliza un </tbody>comando y el cuerpo finaliza, utilizo la siguiente línea para invocar el JS de clasificación para ordenar la tabla por columna 3. Obtuve el script de clasificación de la web para que no se reproduzca aquí. Durante al menos el próximo año, puede ver esto en funcionamiento, incluido el JS, en static29.ILikeTheInternet.com. Haga clic en "aquí" en la parte inferior de la página. Aparecerá otra página con la tabla y los scripts. Puede ver que coloca los datos y luego los clasifica rápidamente. Necesito acelerarlo un poco, pero lo básico ya está ahí.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

— Micheal Morrow
fuente

0

Prueba este jQuery :

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

— djserva
fuente

1

jQuery's readyno hará lo que solicitó el OP. readyse activa cuando se carga el DOM, no después de que se cargan los elementos. loadse disparará después de que los elementos terminen de cargarse / renderizarse.

— Jaime Torres

0

llamar a una función después de completar la carga de la página, establecer el tiempo de espera

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

Expandir fragmento

— MH
fuente

0

Tiendo a usar el siguiente patrón para verificar que el documento se complete la carga. La función devuelve una Promesa (si necesita admitir IE, incluya el polyfill ) que se resuelve una vez que el documento completa la carga. Se usa setIntervaldebajo porque una implementación similar con setTimeoutpodría resultar en una pila muy profunda.

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Por supuesto, si no tiene que admitir IE:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Con esa función, puede hacer lo siguiente:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

— Paul Rowe
fuente

-1

Estoy usando componentes web, por lo que me funciona:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

— ufukomer
fuente

-3

Coloque su script después de completar la etiqueta del cuerpo ... funciona ...

— Kalyan
fuente

ejecutar la función después de completar la carga de la página

JavaScript

lo mismo para jQuery: