Detecta si la página ha terminado de cargarse

¿Hay alguna manera de detectar cuándo una página ha terminado de cargar, es decir, todo su contenido, javascript y activos como css e imágenes?

asi como:

if(PAGE HAS FINISHED LOADING) { // do something amazing } 

y también, además, si la página se ha estado cargando durante más de 1 minuto, entonces haga otra cosa como:

 if(PAGE HAS BEEN LOADING FOR 1 MIN) { // do something else amazing } 

He visto sitios web como MobileMe de Apple hacer controles similares, pero no han sido capaces de resolverlo en sus enormes bibliotecas de códigos.

¿Alguien puede ayudar?

Gracias

EDITAR: Esto es esencialmente lo que quiero hacer:

 // hide content $("#hide").hide(); // hide loading $("#loading").hide(); // fade in loading animation setTimeout($('#loading').fadeIn(), 200); jQuery(window).load(function() { $("#hide").fadeIn(); $("#loading").fadeOut(function() { $(this).remove(); clearInterval(loadingAnim); }); setTimeout(function() { $("#error").fadeIn(); }, 60000); }); 

 jQuery(window).load(function () { alert('page is loaded'); setTimeout(function () { alert('page is loaded and 1 minute has passed'); }, 60000); }); 

O http://jsfiddle.net/tangibleJ/fLLrs/1/

Consulte también http://api.jquery.com/load-event/ para obtener una explicación sobre jQuery (window) .load.

Actualizar

Una explicación detallada sobre cómo funciona la carga de JavaScript y los dos eventos DOMContentLoaded y OnLoad se pueden encontrar en esta página .

DOMContentLoaded : cuando el DOM está listo para ser manipulado. La forma de jQuery de capturar este evento es con jQuery(document).ready(function () {}); .

OnLoad : cuando el DOM está listo y todos los activos (esto incluye imágenes, iframe, fonts, etc. ) han sido cargados y la clase rueda giratoria / hora desaparece. La forma que jQuery tiene de capturar este evento es jQuery(window).load .

hay dos formas de hacer esto en jquery dependiendo de lo que estés buscando …

usando jquery puedes hacer

  • // esto esperará a que los activos de texto sean cargados antes de llamar esto (el dom .. css .. js)

     $(document).ready(function(){...}); 
  • // esperará a que todas las imágenes y elementos de texto terminen de cargarse antes de ejecutarse

     $(window).load(function(){...}); 

Eso se llama onload. DOM ready fue creado por el motivo exacto por el que onload esperó en las imágenes. (Respuesta tomada de Matchu en una pregunta similar hace un tiempo).

 window.onload = function () { alert("It's loaded!") } 

onload espera todos los recursos que forman parte del documento.

Enlace a una pregunta donde lo explicó todo:

¡Haz clic en mí, sabes que quieres!

Creo que la forma más fácil sería

 var items = $('img, style, ...'), itemslen = items.length; items.bind('load', function(){ itemslen--; if (!itemlen) // Do stuff here }); 

EDITAR, estar un poco loco:

 var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' + 'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' + 'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' + 'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' + 'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' + 'label, legend, li, link, listing, map, marquee, media, menu, meta, ' + 'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' + 'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' + 'source, span, strike, strong, style, sub, sup, table, tbody, td, ' + 'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' + 'window, xmp'), itemslen = items.length; items.bind('load', function(){ itemslen--; if (!itemlen) // Do stuff here }); 

Otra opción que puedes consultar es document.readyState ,

 var chkReadyState = setInterval(function() { if (document.readyState == "complete") { // clear the interval clearInterval(chkReadyState); // finally your page is loaded. } }, 100); 

De la documentación de la página de ReadyState, el resumen del estado completo es

Devuelve “cargando” mientras el documento se está cargando, “interactivo” una vez que se termina de analizar, pero sigue cargando sub-recursos, y “completa” una vez que se ha cargado.

Una opción es tener la página en blanco, conteniendo una pequeña cantidad de javascript. Use la secuencia de comandos para hacer una llamada AJAX para obtener el contenido de la página real, y haga que la función de éxito escriba el resultado sobre el documento actual. En la función de tiempo de espera puedes “hacer algo más increíble”

Seudocódigo aproximado:

 $(document).ready(function(){ $.ajax url of actual page success:do something amazing timeout: do something else }); 

Sin jquery o algo así porque ¿por qué no?

 var loaded=0; var loaded1min=0; document.addEventListener("DOMContentLoaded", function(event) { loaded=1; setTimeout(function () { loaded1min=1; }, 60000); }); 

¿Es esto lo que tienes en mente?

 $("document").ready( function() { // do your stuff } 
 var pageLoaded=0; $(document).ready(function(){ pageLoaded=1; }); 

Usando jquery: https://learn.jquery.com/using-jquery-core/document-ready/

Para su información a las personas que han preguntado en los comentarios, esto es lo que realmente utilicé en los proyectos:

 function onLoad(loading, loaded) { if(document.readyState === 'complete'){ return loaded(); } loading(); if (window.addEventListener) { window.addEventListener('load', loaded, false); } else if (window.attachEvent) { window.attachEvent('onload', loaded); } }; onLoad(function(){ console.log('I am waiting for the page to be loaded'); }, function(){ console.log('The page is loaded'); });