Détecter si la page a fini de charger

Question

Est-il un moyen de détecter quand une page a fini de se charger, c'est à dire toute son contenu, javascript et des actifs comme le css et les images?

donc, comme:

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

et aussi si la page a été chargement de plus de 1 min, puis faire autre chose comme:

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

J'ai vu des sites web comme Apple MobileMe faire des vérifications similaires mais qui n'ont pas été en mesure de le comprendre dans leurs immenses bibliothèques de code.

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

            });

Answer 1

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 le jQuery(window).de la charge.

Mise à jour

Une explication détaillée sur la façon javascript, des travaux de chargement et les deux événements DOMContentLoaded et OnLoad peuvent être trouvés sur cette page.

DOMContentLoaded: Lorsque le DOM est prêt à être manipulé. jQuery façon de capturer cet événement est avec jQuery(document).ready(function () {});.

OnLoad: Lorsque le DOM est prêt et tous les contenus (images, iframe, les polices, etc) ont été chargés et le rouet / heure de classe disparaissent. jQuery façon de capturer cet événement est mentionné ci-dessus jQuery(window).load.

Answer 2

il y a deux façons de le faire en jquery en fonction de ce que vous cherchez..

à l'aide de jquery, vous pouvez le faire

• //cela va attendre pour le texte des actifs à être chargé avant l'appel de cette (le dom.. css.. js)

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

• //cela va attendre que toutes les images et le texte de l'actif à la fin du chargement avant l'exécution de

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

Answer 3

Qui est le onload. DOM prêt a été effectivement créé pour la raison exacte onload attendu sur les images. ( Répondre à des prises de Matchu sur un simmilar question tout à l'heure. )

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

onload attend toutes les ressources qui font partie du document.

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

Cliquez sur moi, vous savez ce que vous voulez!

Answer 4

Je pense que le plus simple serait

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

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

MODIFIER, d'ê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
});

Answer 5

Une option est d'avoir la page est vide, contenant une petite quantité de javascript. Utiliser le script pour faire un appel AJAX pour obtenir le véritable contenu de la page, et le succès de la fonction écrire le résultat sur le document en cours. Dans la fonction d'expiration, vous pouvez "faire autre chose étonnante"

Approximative pseudo-code:

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