Ermitteln Sie, ob die Seite vollständig geladen wurde

Gibt es eine Möglichkeit zu erkennen, wann eine Seite vollständig geladen wurde, dh alle Inhalte, Javascript und Assets wie CSS und Bilder?

So wie:

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

und zusätzlich, wenn die Seite länger als 1 Minute geladen wurde, tun Sie etwas anderes wie:

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

Ich habe gesehen, dass Websites wie Apples MobileMe ähnliche Überprüfungen durchgeführt haben, konnte dies jedoch in ihren riesigen Codebibliotheken nicht herausfinden.

Kann jemand helfen?

Vielen Dank

EDIT: Dies ist im Wesentlichen, was ich tun möchte:

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

});

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

Unter http://api.jquery.com/load-event/ finden Sie eine Erläuterung zur jQuery (Fenster) .load.

Aktualisieren

Eine ausführliche Erklärung zur Funktionsweise des JavaScript-Ladens und zu den beiden Ereignissen DOMContentLoaded und OnLoad finden Sie auf dieser Seite .

DOMContentLoaded : Wenn das DOM zur Bearbeitung bereit ist. jQuerys Art, dieses Ereignis zu erfassen, ist mit jQuery(document).ready(function () {});.

OnLoad : Wenn das DOM bereit ist und alle Assets - einschließlich Bilder, Iframe, Schriftarten usw. - geladen wurden und die sich drehende Rad- / Stundenklasse verschwindet. Die Methode von jQuery zur Erfassung dieses Ereignisses ist die oben erwähnte jQuery(window).load.

Es gibt zwei Möglichkeiten, dies in jquery zu tun, je nachdem, wonach Sie suchen.

Mit jquery können Sie tun

• // Dies wartet darauf, dass die Text-Assets geladen werden, bevor dies aufgerufen wird (dom .. css .. js).

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

• // Dies wartet, bis alle Bilder und Textelemente geladen sind, bevor sie ausgeführt werden

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

Das nennt man Onload. DOM ready wurde tatsächlich aus dem genauen Grund erstellt, aus dem Onload auf Bilder wartete. (Antwort von Matchu auf eine ähnliche Frage vor einiger Zeit.)

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

Onload wartet auf alle Ressourcen, die Teil des Dokuments sind.

Link zu einer Frage, in der er alles erklärt hat:

Klicken Sie auf mich, Sie wissen, dass Sie wollen!

Ich denke, der einfachste Weg wäre

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

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

EDIT, um ein bisschen verrückt zu sein:

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

Eine weitere Option, die Sie im document.readyState überprüfen können , ist:

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

Aus der Dokumentation der readyState-Seite geht die Zusammenfassung des vollständigen Status hervor

Gibt "Laden" zurück, während das Dokument geladen wird, "Interaktiv", sobald das Parsen abgeschlossen ist, aber immer noch Unterressourcen geladen werden, und "Fertig", sobald es geladen wurde.

Eine Möglichkeit besteht darin, dass die Seite leer ist und eine kleine Menge Javascript enthält. Verwenden Sie das Skript, um einen AJAX-Aufruf durchzuführen, um den tatsächlichen Seiteninhalt abzurufen, und lassen Sie die Erfolgsfunktion das Ergebnis über das aktuelle Dokument schreiben. In der Timeout-Funktion können Sie "etwas anderes Erstaunliches tun"

Ungefährer Pseudocode:

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

Hast du das gedacht?

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

var pageLoaded=0;

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

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

Ohne jquery oder so etwas, warum nicht?

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

Zu Ihrer Information von Leuten, die in den Kommentaren gefragt haben, das habe ich tatsächlich in Projekten verwendet:

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