Phát hiện xem trang đã tải xong chưa

Có cách nào để phát hiện khi một trang đã tải xong, tức là tất cả nội dung, javascript và các tài sản của nó như css và hình ảnh không?

như vậy:

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

và ngoài ra, nếu trang đã tải hơn 1 phút thì hãy làm điều gì đó khác như:

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

Tôi đã thấy các trang web như MobileMe của Apple thực hiện kiểm tra tương tự nhưng không thể tìm ra nó trong thư viện mã khổng lồ của họ.

Có ai giúp được không?

Cảm ơn

CHỈNH SỬA: Về cơ bản đây là những gì tôi muốn làm:

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

});

Hoặc http://jsfiddle.net/tfinityJ/fLLrs/1/

Xem thêm http://api.jquery.com/load-event/ để biết giải thích về jQuery (window) .load.

Cập nhật

Bạn có thể tìm thấy giải thích chi tiết về cách tải javascript và hai sự kiện DOMContentLoaded và OnLoad trên trang này .

DOMContentLoaded : Khi DOM sẵn sàng được thao tác. Cách jQuery nắm bắt sự kiện này là với jQuery(document).ready(function () {});.

OnLoad : Khi DOM đã sẵn sàng và tất cả nội dung - bao gồm hình ảnh, iframe, phông chữ, v.v. - đã được tải và lớp bánh xe quay / giờ biến mất. Cách jQuery nắm bắt sự kiện này đã được đề cập ở trên jQuery(window).load.

có hai cách để thực hiện việc này trong jquery tùy thuộc vào những gì bạn đang tìm kiếm ..

sử dụng jquery bạn có thể làm

• // điều này sẽ đợi nội dung văn bản được tải trước khi gọi điều này (dom .. css .. js)

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

• // điều này sẽ đợi tất cả hình ảnh và nội dung văn bản tải xong trước khi thực thi

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

Đó được gọi là onload. DOM sẵn sàng thực sự đã được tạo ra vì lý do chính xác là tải lên chờ hình ảnh. (Câu trả lời được lấy từ Matchu cho một câu hỏi tương tự cách đây không lâu.)

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

onload đợi tất cả các tài nguyên là một phần của tài liệu.

Liên kết đến một câu hỏi mà anh ấy đã giải thích tất cả:

Nhấp vào tôi, bạn biết bạn muốn!

Tôi nghĩ cách dễ nhất sẽ là

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

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

CHỈNH SỬA, để có một chút điên rồ:

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

Một tùy chọn khác mà bạn có thể kiểm tra tài liệu .readyState như,

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

Từ tài liệu của Trang readyState, tóm tắt về trạng thái hoàn chỉnh là

Trả về "đang tải" trong khi tài liệu đang tải, "tương tác" sau khi hoàn thành phân tích cú pháp nhưng vẫn tải tài nguyên phụ và "hoàn tất" khi tài liệu đã tải.

Một tùy chọn là để trang trống, chứa một lượng nhỏ javascript. Sử dụng tập lệnh để thực hiện cuộc gọi AJAX để lấy nội dung trang thực và có hàm thành công ghi kết quả lên tài liệu hiện tại. Trong chức năng thời gian chờ, bạn có thể "làm điều gì đó tuyệt vời khác"

Mã giả gần đúng:

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

Đây có phải là những gì bạn có trong tâm trí?

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

var pageLoaded=0;

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

Sử dụng jquery: https://learn.jquery.com/using-jquery-core/document-ready/

Nếu không có jquery hoặc bất cứ điều gì tương tự như vậy thì tại sao không?

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

FYI của những người đã hỏi trong các nhận xét, đây là những gì tôi thực sự sử dụng trong các dự án:

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