Deteksi apakah halaman telah selesai dimuat

Adakah cara untuk mendeteksi saat halaman selesai memuat, yaitu semua kontennya, javascript, dan asetnya seperti css dan gambar?

jadi seperti:

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

Dan juga jika halaman telah dimuat lebih dari 1 menit maka lakukan hal lain seperti:

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

Saya telah melihat situs web seperti MobileMe Apple melakukan pemeriksaan serupa tetapi belum dapat mengetahuinya di pustaka kode mereka yang besar.

Adakah yang bisa membantu?

Terima kasih

EDIT: Pada dasarnya inilah yang ingin saya lakukan:

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

});

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

Lihat juga http://api.jquery.com/load-event/ untuk penjelasan tentang jQuery (window) .load.

Memperbarui

Sebuah penjelasan rinci tentang bagaimana javascript memuat karya dan dua peristiwa DOMContentLoaded dan onload dapat ditemukan di halaman ini .

DOMContentLoaded : Saat DOM siap untuk dimanipulasi. Cara jQuery untuk menangkap acara ini adalah dengan jQuery(document).ready(function () {});.

OnLoad : Saat DOM siap dan semua aset - termasuk gambar, iframe, font, dll - telah dimuat dan kelas roda / jam berputar menghilang. Cara jQuery untuk menangkap peristiwa ini adalah yang disebutkan di atas jQuery(window).load.

ada dua cara untuk melakukan ini di jquery tergantung apa yang Anda cari ..

menggunakan jquery yang bisa Anda lakukan

• // ini akan menunggu aset teks dimuat sebelum memanggil ini (dom .. css .. js)

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

• // ini akan menunggu semua gambar dan aset teks selesai dimuat sebelum dijalankan

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

Itu disebut onload. DOM ready sebenarnya dibuat untuk alasan yang tepat bahwa onload menunggu gambar. (Jawaban diambil dari Matchu pada pertanyaan serupa beberapa waktu lalu.)

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

onload menunggu semua sumber daya yang merupakan bagian dari dokumen.

Tautan ke pertanyaan di mana dia menjelaskan semuanya:

Klik saya, Anda tahu Anda mau!

Saya pikir cara termudah adalah

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

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

EDIT, menjadi sedikit gila:

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

Opsi lain Anda dapat memeriksa document.readyState seperti,

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

Dari dokumentasi Halaman readyState ringkasan status lengkapnya adalah

Mengembalikan "memuat" saat dokumen dimuat, "interaktif" setelah selesai parsing tetapi masih memuat sub-sumber daya, dan "selesai" setelah dimuat.

Salah satu opsinya adalah membuat halaman kosong, berisi sedikit javascript. Gunakan skrip untuk membuat panggilan AJAX untuk mendapatkan konten halaman yang sebenarnya, dan minta fungsi sukses menulis hasilnya di atas dokumen saat ini. Dalam fungsi batas waktu, Anda dapat "melakukan sesuatu yang menakjubkan"

Perkiraan pseudocode:

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

Apakah ini yang ada dalam pikiran Anda?

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

var pageLoaded=0;

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

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

Tanpa jquery atau semacamnya karena kenapa tidak?

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

FYI orang yang bertanya di komentar, inilah yang sebenarnya saya gunakan dalam proyek:

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