ตรวจสอบว่าหน้าโหลดเสร็จหรือไม่

มีวิธีตรวจสอบเมื่อหน้าโหลดเสร็จแล้วเช่นเนื้อหาจาวาสคริปต์และเนื้อหาทั้งหมดเช่น css และรูปภาพ

ชอบมาก:

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

และนอกจากนี้หากหน้าเว็บโหลดนานกว่า 1 นาทีให้ทำอย่างอื่นเช่น:

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

ฉันเคยเห็นเว็บไซต์เช่น MobileMe ของ Apple ทำการตรวจสอบที่คล้ายกัน แต่ไม่สามารถหาได้ในไลบรารีรหัสขนาดใหญ่

ใครสามารถช่วย?

ขอบคุณ

แก้ไข: นี่คือสิ่งที่ฉันต้องการทำโดยพื้นฐาน:

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

});

หรือhttp://jsfiddle.net/tangibleJ/fLLrs/1/

โปรดดูที่http://api.jquery.com/load-event/สำหรับคำอธิบายเกี่ยวกับ jQuery (หน้าต่าง) .load

อัปเดต

คำอธิบายโดยละเอียดเกี่ยวกับวิธีการทำงานของการโหลดจาวาสคริปต์และDOMContentLoadedและOnLoadสองเหตุการณ์ในหน้านี้

DOMContentLoaded : เมื่อDOM พร้อมที่จะจัดการ วิธีของ jQuery jQuery(document).ready(function () {});ในการจับภาพเหตุการณ์นี้ด้วย

OnLoad : เมื่อDOM พร้อมและเนื้อหาทั้งหมดซึ่งรวมถึงรูปภาพ iframe แบบอักษรและอื่น ๆได้ถูกโหลดและคลาสล้อหมุน / ชั่วโมงจะหายไป วิธีของ jQuery jQuery(window).loadในการจับภาพเหตุการณ์นี้เป็นดังกล่าวข้างต้น

มีสองวิธีในการทำสิ่งนี้ใน jquery ขึ้นอยู่กับสิ่งที่คุณกำลังมองหา ..

โดยใช้ jquery คุณสามารถทำได้

• // สิ่งนี้จะรอให้เนื้อหาข้อความโหลดก่อนที่จะเรียกสิ่งนี้ (dom .. css .. js)

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

• // สิ่งนี้จะรอให้รูปภาพและเนื้อหาทั้งหมดโหลดเสร็จก่อนที่จะดำเนินการ

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

ที่เรียกว่า onload DOM ready ถูกสร้างขึ้นจริงด้วยเหตุผลที่แน่นอนว่า onload รอภาพ (คำตอบที่นำมาจากMatchuเกี่ยวกับคำถามที่คล้ายคลึงกันเมื่อสักครู่ที่ผ่านมา)

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

onload รอทรัพยากรทั้งหมดที่เป็นส่วนหนึ่งของเอกสาร

เชื่อมโยงไปยังคำถามที่เขาอธิบายทั้งหมด:

คลิกฉันคุณรู้ว่าคุณต้องการ!

ฉันคิดว่าวิธีที่ง่ายที่สุดน่าจะเป็น

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

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

แก้ไขจะบ้าไปหน่อย:

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

อีกทางเลือกหนึ่งที่คุณสามารถตรวจสอบdocument.readyStateเช่น

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

จากเอกสารของหน้า readyState สรุปสถานะที่สมบูรณ์คือ

ส่งคืน "กำลังโหลด" ในขณะที่เอกสารกำลังโหลด "โต้ตอบ" เมื่อเสร็จสิ้นการแยกวิเคราะห์ แต่ยังคงโหลดทรัพยากรย่อยและ "เสร็จสมบูรณ์" เมื่อโหลดเสร็จ

ทางเลือกหนึ่งคือกำหนดให้หน้าว่างโดยมีจาวาสคริปต์จำนวนเล็กน้อย ใช้สคริปต์เพื่อทำการเรียก AJAX เพื่อรับเนื้อหาของเพจจริงและให้ฟังก์ชันสำเร็จเขียนผลลัพธ์บนเอกสารปัจจุบัน ในฟังก์ชันการหมดเวลาคุณสามารถ "ทำอย่างอื่นที่น่าทึ่ง"

pseudocode โดยประมาณ:

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

นี่คือสิ่งที่คุณคิดหรือไม่?

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

var pageLoaded=0;

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

ใช้ jquery: https://learn.jquery.com/using-jquery-core/document-ready/

ไม่มี jquery หรืออะไรทำนองนั้นทำไมไม่?

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

FYI ของคนที่ถามในความคิดเห็นนี่คือสิ่งที่ฉันใช้จริงในโครงการ:

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