페이지로드가 완료되었는지 감지

페이지의 모든 콘텐츠, 자바 스크립트 및 CSS 및 이미지와 같은 자산로드가 완료되면 감지하는 방법이 있습니까?

그처럼:

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

또한 페이지가 1 분 이상로드 된 경우 다음과 같은 다른 작업을 수행하십시오.

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

나는 Apple의 MobileMe와 같은 웹 사이트가 유사한 검사를 수행하는 것을 보았지만 거대한 코드 라이브러리에서 그것을 알아낼 수 없었습니다.

누구든지 도울 수 있습니까?

감사

편집 : 이것은 본질적으로 내가 원하는 것입니다.

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

jQuery (window) .load에 대한 설명 은 http://api.jquery.com/load-event/ 를 참조하십시오 .

최신 정보

자바 스크립트 로딩이 작동하는 방식과 DOMContentLoaded 및 OnLoad 두 이벤트에 대한 자세한 설명 은 이 페이지 에서 찾을 수 있습니다 .

DOMContentLoaded : DOM 을 조작 할 준비 가 된 경우. 이 이벤트를 캡처하는 jQuery의 방법은 jQuery(document).ready(function () {});.

온로드 하십시오 때 DOM이 준비하고 모든 자산 -이 포함 이미지, iframe을, 글꼴 등 로드 물레 / 시간 클래스가 사라 한을 -. 이 이벤트를 캡처하는 jQuery의 방법은 위에서 언급 한 jQuery(window).load.

찾고있는 항목에 따라 jquery에서이를 수행하는 두 가지 방법이 있습니다.

jquery를 사용하여 할 수 있습니다.

• // 이것은 이것을 호출하기 전에 텍스트 자산이로드되기를 기다릴 것입니다 (dom .. css..js).

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

• // 실행하기 전에 모든 이미지와 텍스트 애셋이로드를 완료 할 때까지 기다립니다.

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

이를 온로드라고합니다. 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 Page의 문서에서 전체 상태 요약은 다음과 같습니다.

문서가로드되는 동안 "로드 중"을 반환하고, 구문 분석이 완료되면 "대화 형"을 반환하지만 하위 리소스를로드하고 나면 "완료"를 반환합니다.

한 가지 옵션은 소량의 자바 스크립트를 포함하여 페이지를 비워 두는 것입니다. 스크립트를 사용하여 AJAX 호출을 수행하여 실제 페이지 콘텐츠를 가져오고 성공 함수가 현재 문서에 결과를 작성하도록합니다. 타임 아웃 기능에서 "다른 놀라운 일을 할 수 있습니다"

대략적인 의사 코드 :

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

코멘트에서 질문 한 사람들의 참고로, 이것은 실제로 프로젝트에서 사용한 것입니다.

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