Necesito ejecutar un código JavaScript cuando la página se haya cargado completamente. Esto incluye cosas como imágenes.
Sé que puedes verificar si el DOM está listo, pero no sé si esto es lo mismo que cuando la página está completamente cargada.
Respuestas:
Eso se llama load. Llegó muuuucho antes de que DOM ready estuviera listo, y DOM ready fue creado por la razón exacta que loadesperaba en las imágenes.
window.addEventListener('load', function () {
alert("It's loaded!")
})window.onloadse llama cuando cada componente de página / recurso (es decir, * incluye * imágenes). Estoy en lo cierto?
onloadespera todos los recursos que forman parte del documento. Esto excluye, por supuesto, las solicitudes creadas dinámicamente que no forman parte del documento en sí, por ejemplo, una solicitud AJAX.
addEventListener("load", function(){... en })lugar de sobrescribir la onloadpropiedad.
Por lo general, puede usar window.onload, pero puede notar que los navegadores recientes no se activan window.onloadcuando usa los botones de historial de retroceso / avance.
Algunas personas sugieren contorsiones extrañas para solucionar este problema, pero en realidad si solo haces un window.onunloadcontrolador (incluso uno que no hace nada), este comportamiento de almacenamiento en caché se deshabilitará en todos los navegadores. El MDC documenta esta "característica" bastante bien, pero por alguna razón todavía hay personas que usan setIntervaly otros hacks extraños.
Algunas versiones de Opera tienen un error que se puede solucionar agregando lo siguiente en algún lugar de su página:
<script>history.navigationMode = 'compatible';</script>Si solo está tratando de obtener una función de JavaScript llamada una vez por vista (y no necesariamente después de que el DOM haya terminado de cargarse), puede hacer algo como esto:
<img src="javascript:location.href='javascript:yourFunction();';">Por ejemplo, uso este truco para precargar un archivo muy grande en el caché en una pantalla de carga:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">En aras de la integridad, es posible que también desee vincularlo a DOMContentLoaded, que ahora es ampliamente compatible
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});Más información: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.readyhicieron referencia , pensé que era una buena contribución. Por cierto. Que haría uso de la addEventListener-method también para el loadcaso, sin embargo, ya que le permite tener múltiples devoluciones de llamada:window.addEventListener("load", function(event){ // your code here });
Pruebe esto: solo se ejecuta después de que se haya cargado toda la página
Por Javascript
window.onload = function(){
// code goes here
};Por jquery
$(window).bind("load", function() {
// code goes here
});$(window)me hace pensar que esto sería jquery, ¿verdad? ¿O estoy confundiendo alguna sintaxis de JavaScript? (Soy nuevo en JS).
$(document).ready();cuando jQuery está disponible?
Prueba este código
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}visite https://developer.mozilla.org/en-US/docs/DOM/document.readyState para más detalles
"interactive"no está completamente cargado "complete"está completamente cargado
Javascript usando el onLoad()evento esperará a que se cargue la página antes de ejecutarse.
<body onload="somecode();" >Si está utilizando la función de preparación de documentos del marco jQuery, el código se cargará tan pronto como se cargue el DOM y antes de que se cargue el contenido de la página:
$(document).ready(function() {
// jQuery code goes here
});Es posible que desee utilizar window.onload , ya que los documentos indican que no se activa hasta que el DOM esté listo y TODOS los demás activos en la página (imágenes, etc.) estén cargados.
Y aquí hay una manera de hacerlo con PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});En navegadores modernos con javascript moderno (> = 2015) puede agregar type="module"a su etiqueta de script, y todo lo que esté dentro de ese script se ejecutará después de que se cargue toda la página. p.ej:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>También los navegadores más antiguos entenderán el nomoduleatributo. Algo como esto:
<script nomodule>
alert("tuns after")
</script>Para obtener más información, puede visitar javascript.info .
onloadusos $(window).loaden su lugar (jQuery):$(window).load(function() {
//code
});El onload propiedad del mixin GlobalEventHandlers es un controlador de eventos para el evento de carga de una ventana, XMLHttpRequest, elemento, etc., que se activa cuando el recurso se ha cargado.
Entonces, básicamente, JavaScript ya tiene el método de carga en la ventana, que se ejecuta en la página cargada por completo, incluidas las imágenes ...
Puedes hacer algo:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};Actualización de 2019: esta fue la respuesta que funcionó para mí. Como necesitaba varias solicitudes ajax para disparar y devolver datos primero para contar los elementos de la lista.
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});