varias - funcion load javascript
¿Cómo ejecutar una función cuando la página se ha cargado completamente? (11)
Necesito ejecutar algún código JavaScript cuando la página se haya cargado completamente. Esto incluye cosas como imágenes.
Sé que puede verificar si el DOM está listo, pero no sé si esto es lo mismo que cuando la página está completamente cargada.
La propiedad onload de la mezcla 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.
Básicamente, javascript ya tiene el método onload en la ventana, que se ejecuta en qué página está completamente cargada, 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;
};
Si necesita usar muchos onload use $(window).load en $(window).load lugar (jQuery):
$(window).load(function() {
//code
});
Es posible que desee utilizar window.onload , ya que los documentos indican que no se activará hasta que tanto el DOM esté listo como TODOS los demás activos de la página (imágenes, etc.) estén cargados.
Eso se llama onload. Ocurrió muy bien antes de que DOM Ready estuviera disponible, y DOM Ready fue creado en realidad por la razón exacta por la que Onload esperó en las imágenes.
window.onload = function () { alert("It''s loaded!") }
Javascript utilizando el evento onLoad() 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 de jQuery framework, 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
});
Para completar, también es posible que 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
Por lo general, puede usar window.onload , pero puede notar que los navegadores recientes no window.onload cuando usa los botones de historial de avance / retroceso.
Algunas personas suggest contorsiones extrañas para solucionar este problema, pero en realidad, si solo window.onunload un controlador window.onunload (incluso uno que no hace nada), este comportamiento de almacenamiento en caché se desactivará en todos los navegadores. El MDC documenta esta "característica" bastante bien, pero por alguna razón todavía hay personas que usan setInterval y otros hacks raros.
Algunas versiones de Opera tienen un error que puede solucionarse agregando lo siguiente en algún lugar de su página:
<script>history.navigationMode = ''compatible'';</script>
Si solo está intentando obtener una función 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();">
Prueba este codigo
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}
Visite https://developer.mozilla.org/en-US/docs/DOM/document.readyState para obtener más detalles
Y aquí hay una manera de hacerlo con PrototypeJS :
Event.observe(window, ''load'', function(event) {
// Do stuff
});
el evento window.onload se activará cuando todo esté cargado, incluidas las imágenes, etc.
Si desea que su código js se ejecute lo antes posible, desearía verificar el estado de listo para DOM, pero aún necesita acceder a los elementos DOM.
Prueba esto, solo se ejecuta después de que toda la página se haya cargado
Por Javascript
window.onload = function(){
// code goes here
};
Por jquery
$(window).bind("load", function() {
// code goes here
});