Détecter si la page a fini de se charger

Existe-t-il un moyen de détecter quand une page a fini de se charger, c'est-à-dire tout son contenu, son javascript et ses ressources telles que css et images?

alors comme:

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

et aussi si la page se charge depuis plus d'une minute, faites autre chose comme:

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

J'ai vu des sites Web comme MobileMe d'Apple effectuer des vérifications similaires, mais je n'ai pas été en mesure de le comprendre dans leurs énormes bibliothèques de codes.

Quelqu'un peut-il aider?

Merci

EDIT: C'est essentiellement ce que je veux faire:

// 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);

});

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

Voir aussi http://api.jquery.com/load-event/ pour une explication sur jQuery (window) .load.

Mettre à jour

Une explication détaillée du fonctionnement du chargement javascript et des deux événements DOMContentLoaded et OnLoad peut être trouvée sur cette page .

DOMContentLoaded : lorsque le DOM est prêt à être manipulé. La manière de jQuery de capturer cet événement est avec jQuery(document).ready(function () {});.

OnLoad : Lorsque le DOM est prêt et que tous les actifs - cela inclut les images, les iframe, les polices, etc. - ont été chargés et la classe roue / heure disparaît. La manière de jQuery de capturer cet événement est celle mentionnée ci-dessus jQuery(window).load.

il y a deux façons de faire cela dans jquery en fonction de ce que vous recherchez.

en utilisant jquery, vous pouvez faire

• // cela attendra que les ressources de texte soient chargées avant d'appeler ceci (le dom .. css .. js)

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

• // cela attendra la fin du chargement de toutes les images et du texte avant de s'exécuter

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

Cela s'appelle onload. DOM ready a en fait été créé pour la raison exacte que le chargement attendait les images. (Réponse tirée de Matchu sur une question similaire il y a quelque temps.)

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

onload attend toutes les ressources qui font partie du document.

Lien vers une question où il a tout expliqué:

Cliquez sur moi, vous savez que vous le voulez!

Je pense que le moyen le plus simple serait

var items = $('img, style, ...'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

EDIT, pour être un peu fou:

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
});

Une autre option, vous pouvez vérifier le document.readyState comme,

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

À partir de la documentation de la page readyState, le résumé de l'état complet est

Renvoie «chargement» pendant le chargement du document, «interactif» une fois qu'il a terminé son analyse mais toujours en train de charger les sous-ressources, et «terminé» une fois qu'il est chargé.

Une option consiste à laisser la page vierge, contenant une petite quantité de javascript. Utilisez le script pour effectuer un appel AJAX pour obtenir le contenu réel de la page et demandez à la fonction de succès d'écrire le résultat sur le document actuel. Dans la fonction de temporisation, vous pouvez "faire quelque chose d'autre incroyable"

Pseudocode approximatif:

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

Est-ce ce que vous aviez en tête?

$("document").ready( function() {
    // do your stuff
}

var pageLoaded=0;

$(document).ready(function(){
   pageLoaded=1;
});

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

Sans jquery ou quelque chose comme ça parce que pourquoi pas?

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

FYI des personnes qui ont demandé dans les commentaires, voici ce que j'ai réellement utilisé dans les projets:

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');
});