Detectar si la página ha terminado de cargarse

¿Hay alguna forma de detectar cuando una página ha terminado de cargarse, es decir, todo su contenido, javascript y activos como css e imágenes?

asi como:

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

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

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

He visto sitios web como MobileMe de Apple realizar comprobaciones similares, pero no he podido averiguarlo 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 (ventana) .load.

Actualizar

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

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, fuentes, etc. , se han cargado y la clase de rueda giratoria / hora desaparece. La forma de jQuery de capturar este evento es la mencionada anteriormente jQuery(window).load.

Hay dos formas de hacer esto en jquery dependiendo de lo que esté buscando.

usando jquery puedes hacer

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

  $(document).ready(function(){...});

• // esto esperará a que todas las imágenes y activos de texto terminen de cargarse antes de ejecutar

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

Eso se llama onload. DOM ready se creó en realidad por la razón exacta por la que onload esperaba imágenes. (Respuesta tomada de Matchu a 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, para 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 puede consultar el document.readyState como,

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

De la documentación de readyState Page, el resumen del estado completo es

Devuelve "cargando" mientras se carga el documento, "interactivo" una vez que ha terminado de analizar pero aún cargando sub-recursos, y "completo" una vez que se ha cargado.

Una opción es que la página esté en blanco y que contenga una pequeña cantidad de JavaScript. Utilice el script para realizar una llamada AJAX para obtener el contenido real de la página 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 asombroso"

Pseudocódigo aproximado:

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

¿Es esto lo que tenías 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/

Sin jquery ni nada de eso porque ¿por qué no?

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

Para su información de las personas que han preguntado en los comentarios, esto es lo que realmente usé 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');
});