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

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

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

예를 들어 다음과 같습니다.

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

또한 페이지가 1분 이상 로드된 경우 다음과 같은 작업을 수행합니다.

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

저는 애플의 모바일미와 같은 웹사이트들이 비슷한 검사를 하는 것을 보았지만, 그들의 거대한 코드 라이브러리에서는 그것을 알아낼 수 없었습니다.

누가 도와줄 수 있습니까?

감사해요.

편집: 이것이 근본적으로 제가 하고 싶은 일입니다.

// 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).on("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/ 도 참조하십시오.

갱신하다

javascript loading의 작동 방식과 DOM Content Loaded 및 OnLoad 두 이벤트에 대한 자세한 설명은 이 페이지에서 확인할 수 있습니다.

DOM 콘텐츠가 로드됨:DOM을 조작할 준비가 되었을 때.jQuery의 이번 이벤트 캡처 방법은jQuery(document).ready(function () {});.

OnLoad: DOM이 준비되고 이미지, iframe, 글꼴 등의 모든 자산이 로드되고 회전 휠/아워 클래스가 사라집니다.jQuery의 이 이벤트 캡처 방법은 위에 언급한 것입니다.jQuery(window).load.

당신이 무엇을 찾는지에 따라서 이것을 하는 두가지 방법이 있습니다.

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

• //이것은 텍스트 자산이 로드될 때까지 기다렸다가 이를 호출합니다(dom..css.. js)

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

• //모든 이미지 및 텍스트 자산이 로드가 완료될 때까지 기다린 후 실행됩니다.

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

그것은 온로드(onload.DOM ready는 실제로 온로드가 이미지에서 대기하는 정확한 이유로 만들어졌습니다.(얼마전 비슷한 질문에 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
});

문서를 확인할 수 있는 또 다른 옵션.readyState like,

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

readyState 페이지의 문서에서 완료 상태의 요약은 다음과 같습니다.

문서가 로드되는 동안 "로딩"을 반환하고, 파싱이 완료되었지만 하위 리소스를 계속 로드하는 동안 "인터랙티브"를 반환하며, 로드가 완료되면 "완료"를 반환합니다.

참고로 댓글로 문의하신 분들은 제가 실제로 프로젝트에 사용한 내용입니다.

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

한 가지 옵션은 페이지를 공백으로 두되, 적은 양의 자바스크립트를 포함하는 것입니다.스크립트를 사용하여 실제 페이지 내용을 얻기 위해 AJAX 호출을 하고 성공 함수가 현재 문서에 결과를 쓰도록 합니다.타임아웃 기능에서 "다른 놀라운 것을 할 수 있습니다."

대략적인 의사 코드:

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

이것이 당신이 생각하고 있던 것입니까?

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

잡동사니 같은 것도 없이 왜 안 돼요?

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

var pageLoaded=0;

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

jquery 사용하기: https://learn.jquery.com/using-jquery-core/document-ready/

언급URL : https://stackoverflow.com/questions/7083693/detect-if-page-has-finished-loading